用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 ...
最新文章
- android 快速启动,《Android APP可以有的东西》之显示篇:快速启动App
- linux uboot nfs启动,uboot中利用TFTP和NFS加载镜像到ram运行
- 机试题型_2020年焊工(技师)新版试题及焊工(技师)试题及答案
- 统计各个函数的耗时_分享一次CMS GC耗时狠高优化过程全记录
- Linux目录的可写意味着,Linux权限分析 - osc_h5427nyq的个人空间 - OSCHINA - 中文开源技术交流社区...
- QImage QPixmap Mat区别
- java初入多线程6
- 鸟叫就能黑掉AI系统,而且你根本察觉不到
- 阿里云MaxCompute中pyODPS的使用:多线程上传、下载、分区
- MSP430学习笔记10-ADC采集1602显示
- 14.Adding Frontend Files to your Module
- 403保护网站服务器,HTML5服务器禁止访问403错误动画
- c语言编译器 for mac,编译工具CMake for mac
- 漫画:一场大会,秀出了中国人自己的操作系统!
- 本科的控制工程到底学什么?
- 图解 Python 编程(6) | 条件控制与if语句(附要点速查表·完结)
- 互联网晚报 | 11月2日 星期二 | 菜鸟推出“个人减碳账单”;特斯拉上线0首付购车方案;《个人信息保护法》正式实施...
- linux下如何进行system(“pause”)同等操作
- hbase排序 ASCII码对照表
- 【转载】网站关闭了域名备案信息是否需要注销,答案是一定要记得注销域名备案信息