用JavaScript实现图片上传并预览
一、前端界面是通过jqgrid展示的
jqgrid是典型的B/C架构(浏览器/服务器模式),服务器端只需提供数据管理,浏览器只需负责数据显示。
jqGrid是用ajax实现对请求和响应的处理,支持局部实时刷新。
二、jqgrid特性
1、通过配置url地址数据显示格式
2、支持行编辑,列搜索过滤
3、支持分页
4、添加表单支持文件上传
5、链式调用
三、代码实例
1、jqgrid页面展示
$(document).ready(function () {$("#gridTable").jqGrid({colNames:['标号','班次', '第一班', '第二班', '第三班', '第四班','操作'],colModel:[{name:'mark',index:'mark',width: 100,},{name:'division',index:'division',width: 100,},{name:'first_class',index:'first_class',width: 100,}, {name:'second_class',index:'second_class',width: 100,},{name:'third_class',index:'third_class',width: 100,}, {name: 'fouth_class',index: 'fouth_class',width: 100,}, {name: 'operate',index: 'operate',width: 200,search: false,formatter : function(cellvalue,options,rowObject){var id = rowObject.markvar str = '<button class="btn-info" data-for="pictureModal">'+'图片'+'</button>';return str;},}],sortname : "mark",sortorder : "desc",viewrecords : true,width: 747,height: 355,rowNum: 10,datatype: 'text',pager: "#gridPager",onSelectRow:function(rowid){grid_selectRow = $("#gridTable").jqGrid("getRowData",rowid);$("#modal_picture").pictureLoading({});},ondblClickRow: function(rowid) {grid_selectRow = $("#gridTable").jqGrid("getRowData",rowid);$("#edit").trigger("click");},});jf_initJqgrid();jf_click();function jf_initJqgrid(){$.ajax({url:"DivisiondefineServlet",async:true, //是否为异步请求cache:false, //是否缓存结果type:"GET",dataType:"json",success : function(data){$("#gridTable").jqGrid("clearGridData");for(var i=0;i<=data.length;i++){$("#gridTable").jqGrid('addRowData',i+1,data[i]);}}})}$('[id^=jqgh_gridTable_]').css("height","20px");function jf_click() {$("#add").click(function () {$("#modal-divisionAdd").divisionAdd({});})$("#edit").click(function () {$("#modal-divisionEdit").divisionEdit({});})$("#delete").click(function () {jf_delete();jf_initJqgrid();})}function jf_delete() {$.ajax({url:"DivisiondefineServlet?action=delete",async:true, //是否为异步请求cache:false, //是否缓存结果type:"POST",dataType:"text",data :{"mark1" : grid_selectRow.mark,},})}
});
2、模块页面
;(function($){$.fn.pictureLoading = function(options){var el = this;var opts = {}var param = $.extend(opts,options);var or = new Order(el, param);}var Order = function(el,param){this.el=el;this.param=param;this.orderContent();this.bindEvent();this.orderSetValue();}Order.prototype = {orderContent : function(){//创建模态窗体this.el.addClass("modal").attr("tabindex","-1").attr("data-backdrop","static");html= '<div class="modal-dialog">'+'<div class="modal-content" style="width: 450px">'+'<div class="modal-header" style="border-bottom:0px;">'+'<div class="row col-sm-12">'+'<div class="col-sm-8" align="left">'+'<span></span>'+'</div>'+'<div class="col-sm-4" align="right">'+'<button class="close" data-dismiss="modal" aria-hidden="true" value="HTML">'+'<span class="blue">×</span>'+'</button>'+'</div>'+'</div>'+'</div>'+'<div class="modal-body" style="height:350px;top: -30px">'+'<form id="form" action="PictureServlet" method="post">'+'<span>标号</span><input id="mark" name="mark" disabled/>'+'<span id="FPicName">'+'<input id="IronMan" type="file" size="45" name="IronMan" class="avatar input" οnchange="loadfile(); "style="display:none";/>'+'<img id="viewImg" class="viewImg" src="picture/html.jpg" style="height: 300px;width: 400px;" ="loadPic();" >'+'</span>'+'</form>'+'</div>'+'<div class="modal-footer">'+'<div align="right">'+'<div class="btn-group">'+'<button id="btnSubCancel" class="btn btn-default btn-sm" data-dismiss="modal">'+'<span>退出</span>'+'</button>'+'</div>'+'</div>'+'</div>'+'</div>'+'</div>';this.el.html("");this.el.append(html);this.el.modal("show");},orderSetValue : function(){$("#mark").val(grid_selectRow.mark);$.ajax({url:"PictureServlet",async:true, //是否为异步请求cache:false, //是否缓存结果type:"GET",dataType:"json",data :{"mark" : $("#mark").val()},success : function(data){$('#viewImg').attr('src', "../../../picture/" + data);},error:function () {alert("error");}})},//自定义JS点击事件bindEvent : function(){},}
})(jQuery)
3、ajax实现异步请求
function loadfile(){var picName = $("#IronMan").val().replace("C:\fakepath\","");$.ajax({url:"PictureServlet",async:true, //是否为异步请求cache:false, //是否缓存结果type:"POST",dataType:"json",data :{"mark" : $("#mark").val(),"picName":picName,},})$('#viewImg').attr('src', "../../../picture/" + picName);
}
4、servlet存储并在本地存储图片文件
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {System.out.println("servlet");response.setContentType("text/html");request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");int mark = Integer.parseInt(request.getParameter("mark"));String picName = request.getParameter("picName");service.insertPic(mark,picName);String directory = "E:/GDKJ/others/imooc_pic";File file = new File(directory,picName);if(file.exists()) {System.out.println(file.getAbsolutePath());System.out.println(file.getName());System.out.println(file.length());} else {file.getParentFile().mkdirs();try {file.createNewFile();} catch (IOException e) {System.out.println("创建新文件时出现了错误。。。");e.printStackTrace();}}}
注:service和dao中代码省略不计(可参考我的博客ajax异步加载jqgrid之动态创建)
四、效果展示
用JavaScript实现图片上传并预览相关推荐
- js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
- DevExpress控件使用系列--ASPxUploadControl(图片上传及预览)
1.控件功能 列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- MUI 图片上传、预览、删除重选等等实现
MUI 图片上传.预览.删除重选等等实现 本地项目路径: C:\Users\Administrator\Desktop\超实用的javascript代码\10.5 - MUI 轮播\login\set ...
- input文件框选择本地图片后页面预览图片并获取图片长宽以及大小 图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
- MUI学习笔记之图片上传和预览
MUI学习笔记之图片上传和预览 源代码是从博客园下载 我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...
- html5图片上传与预览实现
最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式. 图片预览 首先,解决图片预览问题.在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览 ...
- alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决:
vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: 参考文章: (1)vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: (2)https://www.cnblogs.co ...
最新文章
- 3.1.4 如何使深度学习模型达到人类水平以及超高人类水平
- edas部署需要哪些参数_强夯设计与施工中需要确定的主要技术参数有哪些
- VTK/ITK 学习资料
- 使用python简单连接并操作数据库
- [1] JSP里的一个最简单的过滤器(filter)的例子
- python多线程_干货|理解python多线程和多进程
- linux:fdisk分区命令详解
- Oculus:自己做内容不是长远之计,资助第三方开发者才是王道
- 当出现“在当前位置发现已经存在为RESUME.XLW的文件。您希望将该文件替换掉吗?” 解决方案...
- TM2008 Preview体验
- ATMEGA128芯片标识
- 多旅行商问题(Multiple Traveling Salesman Problem, MTSP):单仓库多旅行商问题及多仓库多旅行商问题(含动态视频)
- linux服务器sftp无法连接超时,sftp连接服务器失败
- 如何配置java环境_vscode配置java环境
- OAuth协议(三方登录授权)
- 曝光,程序员的 10 个摸鱼神器
- Android 带你玩转实现游戏2048 其实2048只是个普通的控件
- 河南新华计算机学校学费多少,河南新华电脑学院提前三年收费 育人还是圈钱?...
- Cuckoo Filter
- php把语音转成帧,视频中提取音频软件 怎样把视频中的音乐提取出来,视频转换成音频方法...
热门文章
- IOError: unknown file format 的解决办法
- 【软件测试】功能测试的测试工作流程
- 永磁同步电机参数自整定 包括电机极对数、电阻、电感、磁链、反电势常数、编码器零位等
- fiddler 修改响应数据
- Linux 代理 http 和 socks 配置区别
- [iOS]-Category、Extension和关联对象
- 使用电信e8-c家庭网关时,无线路由器的设置方法
- python-圆形检测-封闭轮廓检测
- 关于彻底获得管理员权限的方法。(解决PYTHON PS 等报错问题)
- C/C++注册表【4】键值的获取,设置,删除,枚举