基于jQueryEasyUI框架的动态多文件上传的实现

合集下载

jQuery上传文件的方法

jQuery上传⽂件的⽅法<div id="login-form"><form id="uploadSongsForm" enctype="multipart/form-data"><div id="showMp3Files" class="tittle"><div class=" form-group"><input type="file" name="file" id="mp3Files"></div><div class=" form-group"><button type="reset" id="clearmp3" class="btn btn-dark">清除选择歌曲</button></div><div class=" form-group"><input type="submit" value="上传" id="uploadBtn" class=" btn btn-primary"></div></div></form>jq代码$("#uploadSongsForm").submit(function () {$.post("/upload",{file:file},function (info) {if(info.flag){alert(info.msg)}else{//添加失败alert(info.msg);}});return false;});controller代码private static final org.slf4j.Logger LOGGER = LoggerFactory.getLogger(FileUploadController.class);@GetMapping("/upload")public String upload() {return "upload";}@PostMapping("/upload")@ResponseBodypublic ResultInfo upload(@RequestParam("file") MultipartFile file) {ResultInfo info=new ResultInfo();info.setFlag(false);if (file.isEmpty()) {info.setMsg("⽂件为空");info.setFlag(false);return info;}String fileName = file.getOriginalFilename();String filePath = "/mp3/";System.out.println("⽂件名:"+fileName);File dest = new File(filePath + fileName);try {file.transferTo(dest);("succeed");info.setFlag(true);info.setMsg("上传成功");return info;} catch (IOException e) {LOGGER.error(e.toString(), e);}info.setMsg("上传失败");return info;}就我的猜测是jq段肯定是有错误的。

jquery.multifile多文件上传

Jquery使用插件实现多文件同时上传的功能需要用到的相关jar包和第三方插件分别为：jquery-1.4.2.min.js,jquery.MultiFile.js,commons-io-1.4.jar,commons-fi leupload-1.2.1.jar引入相关的js和jar文件即可开始上传的操作：//此处的上传没有判断文件上传的类型，因为使用了jquery的插件，所以此处的上传类型在前台的页面做控制final long MAX_SIZE = 3 * 1024 * 1024;// 设置上传文件最大为 3M response.setContentType("text/html");// 设置字符编码为UTF-8, 这样支持汉字显示response.setCharacterEncoding("GBK");// 实例化一个硬盘文件工厂,用来配置上传组件ServletFileUpload DiskFileItemFactory dfif = new DiskFileItemFactory();dfif.setSizeThreshold(4096);// 设置上传文件时用于临时存放文件的内存大小,这里是4K.多于的部分将临时存在硬盘dfif.setRepository(new File("c:\\"));// 设置存放临时文件的目录,web根目录下的ImagesUploadTemp目录// 用以上工厂实例化上传组件ServletFileUpload sfu = new ServletFileUpload(dfif);// 设置最大上传尺寸sfu.setSizeMax(MAX_SIZE);// 从request得到所有上传域的列表List fileList = null;try {fileList = sfu.parseRequest(request);} catch (FileUploadException e) {// 处理文件尺寸过大异常if (e instanceof SizeLimitExceededException) {out.println("文件尺寸超过规定大小:" + MAX_SIZE + "字节<p />"); out.println("<a href=\"upload.html\" target=\"_top\">返回</a>"); return;}e.printStackTrace();}// 没有文件上传if (fileList == null || fileList.size() == 0) {out.println("请选择上传文件<p />");out.println("<a href=\"upload_sence.jsp\" target=\"_top\">返回</a>");return;}// 得到所有上传的文件Iterator fileItr = fileList.iterator();// 循环处理所有文件while (fileItr.hasNext()) {FileItem fileItem = null;String fpath = "";long size = 0;// 得到当前文件fileItem = (FileItem) fileItr.next();if (fileItem.isFormField()) {//如果不是上传域，而是普通的表单域(如：<input type="text|radio">)则在此进行处理}// 忽略简单form字段而不是上传域的文件域(<input type="text" />等) if (fileItem == null || fileItem.isFormField()) {continue;}// 得到文件的完整路径fpath = fileItem.getName();// 得到文件的大小size = fileItem.getSize();if ("".equals(fpath) || size == 0) {out.println("请选择上传文件<p />");out.println("<a href=\"upload_sence.jsp\" target=\"_top\">返回</a>");return;}// 得到去除路径的文件名String t_name = fpath.substring(stIndexOf("\\") + 1);// 得到文件的扩展名(无扩展名时将得到全名)String t_ext = t_name.substring(t_stIndexOf(".") + 1);// 根据系统时间生成上传后保存的文件名//String prefix = String.valueOf(now);// 保存的最终文件完整路径,保存在web根目录下的ImagesUploaded目录下String u_name = request.getRealPath("/") + "uploaded\\" + t_name + "." + t_ext;File file = new File(u_name);fileItem.write(file);out.println("文件上传成功. 已保存为: " + t_name + "." + t_ext+ "   文件大小: " + size + "字节<p />");out.println("<a href=\"upload_sence.jsp\" target=\"_top\">继续上传</a>");}PS:如果你上传文件时需要使用当前时间的毫秒数来做上传文件的文件名，那么请不要使用此种方式上传，因为该方式可以让用户通过一个文本域同时上传多个文件，而多个文件是同时进行上传操作的，所以在同一时间内最后一个上传的文件很可能会将前边的文件覆盖掉，造成文件的丢失相应的上传页面代码如下:<%@ page language="java" contentType="text/html; charset=GBK"pageEncoding="GBK"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>JQeury多文件上传测试</title><!--引入jquery的主文件和上传的插件,注意下方蓝色文件显示的地方，只有使用了jquery相关插件的时候才可以这样写，其中class="multi"指定了该域可以使用jquery插件特有的属性，accept="gif|jpg"表示允许的上传文件类型，多个类型之间用|进行分割。

jQuery插件实现文件上传功能（支持拖拽）

jQuery插件实现⽂件上传功能（⽀持拖拽）先贴上源代码地址，。

然后直接进⼊主题啦，当然，如果你觉得我有哪⾥写的不对或者⽋妥的地⽅，欢迎留⾔指出。

在附上⼀些代码之前，我们还是先来了解下，上传⽂件的时候需要利⽤的⼀些必要的知识。

⾸先我们要说的就是FileReader对象，这是⼀个HTML5提出的，专门⽤来异步的读取⽤户计算机上⽂件的对象，。

所以如果我们想要使⽤它，那么⾸先我们得先创建⼀个FileReader对象。

var fr = new FileReader()1、这个对象拥有五个⽅法：下⾯附上⼀个例⼦：<input type="file" id="file"/><img src="" alt="" id="img"><script src="jquery.min.js"></script><script>var ipt = $('#file'),img = $('#img');ipt.change(function () {var fr = new FileReader();fr.readAsDataURL(this.files[0]);fr.onload = function () {img.attr('src', fr.result);}})</script>效果图：其他的⼏个⽅法也基本上⼤同⼩异，所以在这⾥就不做过多解释了。

2、这个对象还拥有三个状态常量：3、这个对象还拥有三个属性：4、6个事件处理程序：这⾥我们再来说说formData对象，同样的我们利⽤它来上传⽂件，⾸先需要创建⼀个formData对象实例var formData = new FormData(); 这个对象有⼀个append⽅法，该⽅法接受三个参数：name、value、filename在使⽤这个对象上传⽂件的时候，我们需要注意⼀点，需要在form标签上添加上enctype="multipart/form-data"这个属性，⽤来设置表单的MIME编码，因为默认的编码格式是application /x-www-form-urlencoded，不能⽤于⽂件上传，也可以在使⽤jQuery的$.ajax⽅法的时候，设置data属性为formData。

jQueryEasyUI框架使用文档

JQUERY EASYUI框架使用文档jQuery EasyUI是一个基于jQuery实现的Web UI框架，用法非常简单，但是功能非常强大，使用它你可以使用很少的Javascript代码来制作适合自己的网页。

主页:下载:/download这里介绍一下快速使用这个框架的方法：首先在你使用的HTML页面的头部需要包含一些CSS文件和JS文件：1.<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">2.<script type="text/javascript"src="../jquery-1.4.2.min.js"></script>3.<script type="text/javascript"src="../jquery.easyui.min.js"></script>这三个文件是必须要包含的，第一个是EasyUI的CSS文件，后面两个JS一个是jQuery，一个是EasyUI的JS文件。

包含这几个文件后就可以使用EasyUI了，因为EasyUI的功能十分强大，所以把这些功能分类如下，便于大家学习使用，我会在随后的文章里逐一介绍每个分类的用法和例子：JQUERY EASYUI 面板(PANEL)用法星期五,2010 四9 00:47:37这篇文章介绍一下面板(Panel)用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例。

（查看演示）同样我们来通过一个小例子来学习一下这些参数，HTML代码如下：1.<div id="p" title="My Panel" collapsible="true"style="padding:10px;">2. Panel Content3.</div>然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里添加一行代码来生成面板：1.$('#p').panel(options);也可以给面板函数添加一些参数：1.$('#p').panel({2. title: 'My Panel',3. tools: [{4. iconCls:'icon-new',5. handler:function(){alert('new')}6. },{7. iconCls:'icon-save'8. handler:function(){alert('save')}9. }]10.});也可以把面板移动到其他位置：1.$('#p').panel('move',{2. left:100,3. top:1004.});在jQuery EasyUI的1.1版本以后又添加了几个新的插件，日期框就在其内，在web查询信息的时候经常会用到日期框，下面来看一下jQuery EasyUI的效图：1.<input id="dd" type="text"></input>然后按照《jQuery EasyUI框架使用文档》包含必要文件后，在$(function(){ }); 里插入下面的代码即可：1.$('#dd').datebox(options);jQuery EasyUI日期框需要依存于一下的几个插件：* calendar（日历）* validatebox（验证框）下面来介绍DateBox的具体用法，首先来看属性：事件方法jQuery EasyUI可以方便实现很多功能，这里将会介绍一下可拖动（Draggable）的具体用法，jQuery EasyUI不仅可以轻松实现DOM元素的拖动，而且可以使用一些参数让它的使用更加灵活，我们来通过一个小例子来学习一下这些参数：（查看演示）HTML代码如下：1.<div id="dd" style="width:100px;height:100px;border:1px solid#ccc;">2. <div id="title" style="background:#ccc;">title</div>3.</div>然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里添加一行代码即可：1.$('#dd').draggable(options);其中options 是可选的参数，可以写，也可以不写，下面再举个写参数的例子，1.$('#dd').draggable({2.handle:'#title',3.disabled:false,4.edge:1,5.axis:'h',6.onStartDrag:function(){7.8.$("<div></div>").appendTo("body").html('startdrag:'+$(this).css('left'));9.10.}11.});下面介绍一下所有的参数和事件，如下：参数事件了解这个参数和事件的作用以后，就可以很灵活的使用jQuery EasyUI 可拖放(Draggable)的功能了。

JQuery与springmvc实现多个文件上传操作

本文由我司收集整编，推荐下载，如有疑问，请与我司联系JQuery 与springmvc 实现多个文件上传操作1. 导入JQuery 相关JS 文件script src=“ @full_path path=“js/jquery.js”/“type=“text/javascript” /scriptscript src=“ @full_path path=“js/ajaxfileupload.js”/“type=“text/javascript” /script这边ajaxfileupload.js 有点特殊，请使用如下改造后的原文件内容：jQuery.extend({ var frameId = ‘jUploadFrame’ + id; var iframeHtml = ‘ iframe id=“‘ + frameId + ‘“name=“‘+ frameId + ‘“‘;if(window.ActiveXObject) if(typeof uri==‘boolean’){iframeHtml += ‘src=“‘+ ‘javascript:false’+ ‘“‘;else if(typeof uri==‘string’){iframeHtml += ‘src=“‘+ uri + ‘“‘;iframeHtml += ‘/ jQuery(iframeHtml).appendTo(document.body); return jQuery(‘#’+ frameId).get(0); createUploadForm: function(id, fileElementId, data) //create form var formId = ‘jUploadForm’+ id; var fileId = ‘jUploadFile’+ id; var form = jQuery(‘form action=““method=“POST”name=“‘+ formId + ‘“id=“‘+ formId + ‘“enctype=“multipart/form-data” /form if (data) { for ( var i in data) { jQuery( ‘ input type=“hidden”name=“‘ + i + ‘“value=“‘+ data[i] + ‘“ / ‘).appendTo(form);for (var i= 0; i fileElementId.length; i ++) { var oldElement = jQuery(‘#’+ fileElementId[i]); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr(‘id’, fileElementId[i]); jQuery(oldElement).attr(‘name’,fileElementId[i]); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); //set attributes jQuery(form).css(‘position’,‘absolute’);jQuery(form).css(‘top’,‘-1200px’); jQuery(form).css(‘left’,‘-1200px’);jQuery(form).appendTo(‘body’);return form; ajaxFileUpload: function(s) { // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id = new Date().getTime() var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)==‘undefined’?false:s.data));。

跟我学jQuery EaseUI Web前端框架——EaseUI组件应用技术及实例

目录1.1跟我学jQuery EaseUI Web前端框架——EaseUI组件应用技术及实例 (2)1.1.1EaseUI官方网站 (2)1.1.2EasyUI相关的系统库文件引入说明 (4)1.1.3Easy UI的控件及相关的技术特性 (8)1.1.4Easy UI组件的初始化 (11)1.1跟我学jQuery EaseUI Web前端框架——EaseUI组件应用技术及实例jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。

本教程将告诉您如何使用jQuery EasyUI 框架创建应用。

1.1.1EaseUI官方网站1、官网/2、中文/3、下载系统库/download/4、主要的技术特性使用easyui不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架，easyui节省您网页开发的时间和规模，easyui很简单但功能强大的。

5、EaseUI相关的帮助文档（1）英文帮助/documentation/index.php#（2）中文教程/tutorial/（3）在线中文教程/jeasyui/jqueryeasyui-tutorial.html1.1.2EasyUI相关的系统库文件引入说明1、Jquery库引用EasyUI中自带了Jquery的库，版本是V2.0.0，请注意该版本不一定适用于你的项目场景，关于JqueryV2.0.0对IE浏览器的支持也是每一个开发人员需要注意的。

Jquery V2.0.0支持IE9+，但最新的不一定是最好的，有时候，请果断更换你的jquery 版本。

还有一点注意的是，项目中通常不会只有一个地方使用jqeury，使用easy ui时，使用项目中统一的jquey版本库，也不失为一种好的方案。

2、关于easyui包目录结构调整说明通常从jquery-easyui官网中下载下来的包，是一个相当完整的包：其目录结构如下：3、其中的各个目录含义（1）demo目录是easyui使用示例，该目录下存放的是EasyUI PC 版各插件的示例示例。

几种js实现的动态多文件上传

方式一：事先写好多个input.在点击时才显示。

也就是说上传的最大个数是写死了的。

html<p><a href='#' onclick='javascript:viewnone(more1)'>添加附件</a><div id='more1' style='display:none'><input type="file" name="attach1" size="50"javascript:viewnone(more2)></span></div><div id='more2' style='display:none'><input type="file" name="attach2" size="50"'></div></p>js<SCRIPT language="javascript">function viewnone(e){e.style.display=(e.style.display=="none")?"":"none";}</script>方式二:这种方式的动态多文件上传是实现了的，很简单的，不说废话看codehtml<input type="button" name="button" value="添加附件" onclick="addInput()"><input type="button" name="button" value="删除附件" onclick="deleteInput()"><span id="upload"></span>js<script type="text/javascript">var attachname = "attach";var i=1;function addInput(){if(i>0){var attach = attachname + i ;if(createInput(attach))i=i+1;}}function deleteInput(){if(i>1){i=i-1;if(!removeInput())i=i+1;}}function createInput(nm){var aElement=document.createElement("input");=nm;aElement.id=nm;aElement.type="file";aElement.size="50";//aElement.value="thanks";//aElement.onclick=Function("asdf()");if(document.getElementById("upload").appendChild(aEle ment) == null)return false;return true;}function removeInput(nm){var aElement = document.getElementById("upload");if(aElement.removeChild(stChild) == null)return false;return true;}</script>方式三：动态多文件上传，只是在oFileInput.click();这个地方，这样做就不能上传这个文件了，因为发现它在上传之时就把这个input中的文件置空了。

jQuery实现异步上传一个或多个文件

jQuery实现异步上传⼀个或多个⽂件本⽂实例为⼤家分享了jQuery实现异步上传⼀个或多个⽂件的具体代码，供⼤家参考，具体内容如下⾸先使⽤SpringMvc⽂件上传，需要引⼊第三⽅上传⽂件的jar：<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency>响应json需要导⼊的包：<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.0</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.9.0</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.9.0</version></dependency>接下来看jsp⽂件：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>⾸页</title></head><body><p>同步上传⼀个⽂件</p><form action="upload/testUpload" method="post" enctype="multipart/form-data"><input type="file" name="upload"><br><input type="submit" value="上传"></form><hr><p>异步上传⼀个⽂件</p><form id="formData" method="post" enctype="multipart/form-data"><input type="file" name="upload"><br><input id="sub" type="button" value="上传"></form><hr><p>异步上传⼀个⽂件,且表单有其他数据</p><form id="formData2" method="post" enctype="multipart/form-data">编&emsp;号:<input type="text" name="id"><br>账户名:<input type="text" name="name"><br>⾦&emsp;额:<input type="text" name="money"><br><input type="file" name="upload"><br><input id="sub2" type="button" value="上传"></form><hr><p>异步上传多个⽂件,且表单有其他数据</p><form id="formData3" method="post" enctype="multipart/form-data">编&emsp;号:<input type="text" name="id"><br>账户名:<input type="text" name="name"><br>⾦&emsp;额:<input type="text" name="money"><br><input type="file" name="upload" multiple="multiple"><br><input id="sub3" type="button" value="上传"></form><script type="text/javascript" src="js/jquery-3.3.1.js"></script><script>$(function () {//异步上传⼀个⽂件$("#sub").click(function () {var file = new FormData($("#formData")[0]);$.post({url:'upload/testUpload',contentType:false, //jQuery不要去设置Content-Type请求头processData:false, //jQuery不要去处理发送的数据cache:false, //不缓存dataType:'json', //返回类型jsondata:file, //⽂件数据success:function (res) {console.log(res);}});});//异步上传⼀个⽂件，带表单参数$("#sub2").click(function () {//将form表单转换为FormData对象var data = new FormData(document.querySelector("#formData2")); $.post({url:'upload/testUpload2',contentType:false, //jQuery不要去设置Content-Type请求头processData:false, //jQuery不要去处理发送的数据cache:false, //不缓存dataType:'json', //返回类型jsondata:data, //表单数据success:function (res) {console.log(res);},error:function (error) {console.log(error);}});});//异步上传多个⽂件，带表单参数$("#sub3").click(function () {//将form表单转换为FormData对象var data = new FormData(document.querySelector("#formData3")); $.post({url:'upload/testUpload3',contentType:false, //jQuery不要去设置Content-Type请求头processData:false, //jQuery不要去处理发送的数据cache:false, //不缓存dataType:'json', //返回类型jsondata:data, //表单数据success:function (res) {console.log(res);},error:function (error) {console.log(error);}});});});</script></body></html>下⾯是controller：@Controller@RequestMapping("/upload")public class FileController {/*** 同步⽂件⼀个上传和异步上传⼀个⽂件，共同使⽤这⼀个控制器⽅法* @param request* @param upload* @return* @throws IOException*/@RequestMapping(value = "/testUpload",method = RequestMethod.POST)public String upload(HttpServletRequest request, MultipartFile upload) throws IOException {//获取⽂件的保存路径String path = request.getServletContext().getRealPath("/uploads");//获取上传⽂件的名称String filename = upload.getOriginalFilename();//获取随机字符串String prefix = UUID.randomUUID().toString().replaceAll("-", "");filename = prefix + "_" + filename;//创建⽂件对象File file = new File(path);//判断路径是否存在，不存在则创建if(!file.exists()){file.mkdir();}//上传⽂件upload.transferTo(new File(file,filename));return "success";}/*** 异步⽂件上传和表单数据* @param request* @param upload* @return* @throws IOException*/@RequestMapping(value = "/testUpload2",method = RequestMethod.POST)public @ResponseBody Account upload2(HttpServletRequest request, MultipartFile upload, Account account) throws IOException { //获取⽂件的保存路径String path = request.getServletContext().getRealPath("/uploads");//获取上传⽂件的名称String filename = upload.getOriginalFilename();//获取随机字符串String prefix = UUID.randomUUID().toString().replaceAll("-", "");filename = prefix + "_" + filename;//创建⽂件对象File file = new File(path);//判断路径是否存在，不存在则创建if(!file.exists()){file.mkdir();}//上传⽂件upload.transferTo(new File(file,filename));return account;}/*** 异步多个⽂件上传和表单数据* @param request* @param upload 采⽤数组接收* @return* @throws IOException*/@RequestMapping(value = "/testUpload3",method = RequestMethod.POST)public @ResponseBody Account upload3(HttpServletRequest request, MultipartFile[] upload, Account account) throws IOException { //获取⽂件的保存路径String path = request.getServletContext().getRealPath("/uploads");//创建⽂件对象File file = new File(path);//判断路径是否存在，不存在则创建if(!file.exists()){file.mkdir();}for (MultipartFile multipartFile : upload) {//获取上传⽂件的名称String filename = multipartFile.getOriginalFilename();//获取随机字符串String prefix = UUID.randomUUID().toString().replaceAll("-", "");filename = prefix + "_" + filename;//上传⽂件multipartFile.transferTo(new File(file,filename));}return account;}}public class Account implements Serializable {private int id;private String name;private float money;//getter or setter....}注意事项：上传⽂件时，表单的 enctype 修改为：multipart/form-data；后端使⽤ MultipartFile upload 对象接收，upload 必须和 <input> 的name属性⼀致；上传多个⽂件，给 <input> 添加：multiple=“multiple”效果：更多精彩内容请参考专题，和进⾏学习。

Easyui-fileUpload使用手册V1.6.4

250
数字
showCbFilesGrid
是否生成回显文件表格,特殊情况下可以自定义回显表格
true
boolean
maxQueryFiles
回显时，一次最大查询出的文件数
20
数字
echoType
文件上传后，回显方式选择，默认：1
1：在当前容器下生成datagrid表格，提供“添加、修改、删除、查看、下载”等功能，可以通过参数对按钮权限进行配置。
1：在当前容器下生成datagrid表格，提供“添加、修改、删除、查看、下载”等功能，可以通过参数对按钮权限进行配置。
2：以文件名列表形式展示，一个文件名称就是一行
3：不回显，根据控件提供的方法（getUploadFiles详见使用手册），自己定义回显样式
6.添加属性：fileWrap
echoType = 2,文件是否换行，true：一个文件一行，false：都在一行
uploadFace
2.$('#objId').fileUpload('property',{
'fileGuid':'-1',
'msgAlign':'bottom'
});
6.添加事件：onDeleteFile删除文件前调用
参数：fileIdList数组类型[],里面为选择的文件fileId
返回：boolean true:执行删除，false：终止删除
.添加autoCloseOnEsc属性，true：esc关闭窗口
.修改部分提示信息样式，对里面的重要内容添加颜色以区分
屈福兴
2016.4.29
V1.3
优化：

PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

PHP结合jQuery插件ajaxFileUpload实现异步上传⽂件实例平时⽤的⽐较多的JQuery图⽚上传插件是Uploadify这个插件，效果很不错，但是由于⼿机不⽀持flash，所以不得不再找⼀个⽂件上传插件来⽤了。

后来发现ajaxFileUpload这个插件挺不错，所以就⽤这个插件来做异步上传⽂件的效果。

⽹上也有很多对ajaxFileUpload插件的使⽤的⽂章，不过我发现没有PHP版，所以这次服务器那边的处理就使⽤PHP语⾔来处理。

⼀、详解ajaxFileUpload插件的语法参数原理：ajaxfileupload是通过监听iframe的onload⽅法来实现，当从服务端处理完成后，就触发iframe的onload事件调⽤其绑定的⽅法，在绑定的⽅法中获取iframe中服务器返回的数据体（⽀持的普通⽂本,json,xml,script, html）语法：$.ajaxFileUpload([options])⼆、接下来我们看看如何去使⽤1、先引⼊ajaxFileUpload这个插件。

2、贴上HTML的代码。

<div data-role="fieldcontain" class="upload-box"><label for="id_photos"><span class="red">* </span>您的有效证件照：</label><input type="file" id="id_photos" name="id_photos" value="上传" style="filter:alpha(opacity=10);-moz-opacity:10;opacity:10;" /><p style="margin-top:0.5em;color:#999;font-size:11pt;">说明：请上传⼿持证件的半⾝照，请确保照⽚内证件信息清晰可读。

聊一聊jquery文件上传（支持多文件上传）

聊⼀聊jquery⽂件上传（⽀持多⽂件上传）谈到⽂件上传，现在⼀般都⽤现成的组件可以使⽤。

PC端的可以使⽤uploadify。

针对微⽹站H5也有uploadifive。

但是这组件并不能满⾜各种场景的需求，例如：预览切图放⼤缩⼩,取消之类的。

普通上传HTML:<form action="Upload"method="post" enctype="multipart/form-data"><input id="File1"name="fileupload" type="file" value="" /><input id="" type="submit" value="上传" /></form>服务端：[HttpPost]public JsonResult Upload(){if (Request.Files.Count > 0){if (Request.Files.Count == 1){HttpPostedFileBase file = Request.Files[0];if (file.ContentLength > 0){string title = string.Empty;title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName);string path = "../UploadFile/" + title;path = System.Web.HttpContext.Current.Server.MapPath(path);file.SaveAs(path);return Json(new { status = true, url = path });}}else{string[] urllist = new string[Request.Files.Count];for (int i = 0; i < Request.Files.Count; i++){HttpPostedFileBase file = Request.Files[i];if (file.ContentLength > 0){string title = string.Empty;title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName);string path = "../UploadFile/" + title;path = System.Web.HttpContext.Current.Server.MapPath(path);file.SaveAs(path);urllist[i] = path;}}return Json(new { status = true, url = urllist });}}else{return Json(new { status = false, url = "",msg="没有⽂件" });}return Json(new { status = false, url = "",msg=""});}后端代码没什么不同的，⼀直就是如此主要是前端html，我标记为红⾊字体的属性⼀个都不能少，少⼀个都不可能完成上传action作⽤：该属性的值指向要提交到某⼀个页⾯,缺少它会不知道提交给谁可以提交的页⾯：abc.aspx abc.ashx mvc的控制器⽅法 webapi接⼝以及其他后端处理程序method作⽤：该属性的值决定以何种⽅式提交,缺少它会报404可以取的值：post get put deleteenctype作⽤：指定类型缺少它在后台接收时⽂件并不会包含进去可以取的值：multipart/form-data application/x-www-form-urlencoded text/plain 此处必须使⽤ multipart/form-data才能将⽂件传到服务端nameinput file ⾥⾯必须包含name属性才能够将⽂件传递到服务器,具体原因不知道,有兴趣的可以尝试下如果有知道的⿇烦解惑相信到了这⾥你⼀定可以完成上传⽂件操作了！⽂件类型筛选能完成基本的⽂件上传操作之后，我们会对它有更多的要求，⽐如：⽂件筛选相信⼤家都不愿意让⼈什么类型的⽂件都往服务器上传，万⼀是病毒或者脚本之类的就⿇烦⼤了。

MVC3+Html5+jquery_easyui做上传文件,带进度条

MVC3+Html5+jquery_easyui做上传⽂件,带进度条为了⽅便,进度条使⽤的是jquery 的 easy ui, ⽹上有下载.需要引⽤easy ui的样式以及脚本⽂件如果不采⽤这样的进度条,也可以修改上传的Js以后⾃⼰做进度条.1<script language="javascript" type="text/javascript">23function fileSelected() {4var file = document.getElementById('fileToUpload').files[0];5var fileName = ;6var file_typename = fileName.substring(stIndexOf('.'), fileName.length);78if (file_typename == '.xls') {//这⾥限定上传⽂件⽂件类型9if (file) {1011 $("#uploadFile").show();12var fileSize = 0;13if (file.size > 1024 * 1024)14 fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';15else16 fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';1718 document.getElementById('fileName').innerHTML = '⽂件名: ' + ;19 document.getElementById('fileSize').innerHTML = '⼤⼩: ' + fileSize;20 document.getElementById('fileType').innerHTML = '类型: ' + file.type;212223 }2425 }26else {2728 $("#uploadFile").hide();29 document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提⽰:上传⽂件应该是.xls后缀⽽不应该是" + file_typename + ",请重新选择⽂件</span>"30 document.getElementById('fileSize').innerHTML ="";31 document.getElementById('fileType').innerHTML ="";3233 }34 }3536function uploadFile() {37var fd = new FormData();38 fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);39var xhr = new XMLHttpRequest();40 xhr.upload.addEventListener("progress", uploadProgress, false);41 xhr.addEventListener("load", uploadComplete, false);42 xhr.addEventListener("error", uploadFailed, false);43 xhr.addEventListener("abort", uploadCanceled, false);44 xhr.open("POST", "/Goods/ToLead");45 xhr.send(fd);46 }4748function uploadProgress(evt) {49if (evt.lengthComputable) {50var percentComplete = Math.round(evt.loaded * 100 / evt.total);51 $('#progressNumber').progressbar('setValue', percentComplete);52 }53else {54 document.getElementById('progressNumber').innerHTML = '⽆法计算';55 }56 }5758function uploadComplete(evt) {59/* 服务器返回数据*/60var message = evt.target.responseText;6162 }6364function uploadFailed(evt) {65 alert("上传出错.");66 }6768function uploadCanceled(evt) {69 alert("上传已由⽤户或浏览器取消删除连接.");70 }71</script>72<div data-options="region:'center',title:'货品管理',iconCls:'icon-ok'">73<div style="margin: 70px;">7475<div id="#DivUp">7677 @using (Html.BeginForm("ToLead", "Goods", FormMethod.Post, new { enctype = "multipart/form-data", id = "form1" }))78 {79<div class="row">80<label for="file">81<h5>82⽂件上传:</h5>83</label>84<input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" onchange="fileSelected();"/>85<a id="uploadFile" style=" display:none" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="uploadFile()"> 86上传并导⼊</a>87</div>8889<div id="fileName" style="padding: 10px">90</div>91<div id="fileSize" style="padding: 10px">92</div>93<div id="fileType" style="padding: 10px">94</div>9596<div id="progressNumber" class="easyui-progressbar" style="width: 400px;">97</div>98 }99</div>100</div>101102</div>1///<summary>2///上传⽂件3///</summary>4///<param name="fileToUpload"></param>5///<returns></returns>6 [HttpPost]7 [ValidateInput(false)]8public string ToLead(HttpPostedFileBase[] fileToUpload)9 {10try11 {12string FileUrl = string.Empty;13foreach (HttpPostedFileBase file in fileToUpload)14 {15string path = bine(Server.MapPath("~/FileUpLoad/Goods"), System.IO.Path.GetFileName(file.FileName));16 file.SaveAs(path);17 FileUrl = path;18 }192021return"上传成功";22 }2324catch {2526return"上传失败";27 }2829 }。

JQueryEasyUIdatagrid批量编辑和提交

JQueryEasyUIdatagrid批量编辑和提交前台主要代码：<script type="text/javascript">$(function() {var $dg = $("#dg");$dg.datagrid({url : "servlet/list",width : 700,height : 250,columns : [ [ {field : 'code',title : 'Code',width : 100,editor : "validatebox"}, {field : 'name',title : 'Name',width : 200,editor : "validatebox"}, {field : 'price',title : 'Price',width : 200,align : 'right',editor : "numberbox"} ] ],toolbar : [ {text : "添加",iconCls : "icon-add",handler : function() {$dg.datagrid('appendRow', {});var rows = $dg.datagrid('getRows');$dg.datagrid('beginEdit', rows.length - 1);}}, {text : "编辑",iconCls : "icon-edit",handler : function() {var row = $dg.datagrid('getSelected');if (row) {var rowIndex = $dg.datagrid('getRowIndex', row); $dg.datagrid('beginEdit', rowIndex);}}}, {text : "删除",iconCls : "icon-remove",handler : function() {var row = $dg.datagrid('getSelected');if (row) {var rowIndex = $dg.datagrid('getRowIndex', row); $dg.datagrid('deleteRow', rowIndex);}}}, {text : "结束编辑",iconCls : "icon-cancel",handler :endEdit}, {text : "保存",iconCls : "icon-save",handler : function() {endEdit();if ($dg.datagrid('getChanges').length) {var inserted = $dg.datagrid('getChanges', "inserted"); var deleted = $dg.datagrid('getChanges', "deleted"); var updated = $dg.datagrid('getChanges', "updated");var effectRow = new Object();if (inserted.length) {effectRow["inserted"] = JSON.stringify(inserted);}if (deleted.length) {effectRow["deleted"] = JSON.stringify(deleted);}if (updated.length) {effectRow["updated"] = JSON.stringify(updated);}$.post("servlet/commit", effectRow, function(rsp) {if(rsp.status){$.messager.alert("提示", "提交成功！");$dg.datagrid('acceptChanges');}}, "JSON").error(function() {$.messager.alert("提示", "提交错误了！");});}}} ]});function endEdit(){var rows = $dg.datagrid('getRows');for ( var i = 0; i < rows.length; i++) {$dg.datagrid('endEdit', i);}}});</script><body><table id="dg" title="批量操作"></table></body></html>后台commit接收类：//设置请求编码req.setCharacterEncoding("UTF-8");//获取编辑数据这里获取到的是json字符串String deleted = req.getParameter("deleted");String inserted = req.getParameter("inserted");String updated = req.getParameter("updated");if(deleted != null){//把json字符串转换成对象List<Bean> listDeleted = JSON.parseArray(deleted, Bean.class);//TODO 下面就可以根据转换后的对象进行相应的操作了}if(inserted != null){//把json字符串转换成对象List<Bean> listInserted = JSON.parseArray(inserted, Bean.class);}if(updated != null){//把json字符串转换成对象List<Bean> listUpdated = JSON.parseArray(updated, Bean.class);}Bean.javapublic class Bean {private String code;private String name;private Double price;public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getName() {return name;}public void setName(String name) { = name;}public Double getPrice() {return price;}public void setPrice(Double price) { this.price = price;}}。

EASYUI文件上传

EASYUI⽂件上传我在较早之前的随笔《》Web框架介绍中介绍了基于Uploadify的⽂件上传操作，免费版本⽤的是Jquery+Flash实现⽂件的上传处理，HTML5收费版本的没有试过。

随着Flash逐渐退出整个环境，很多浏览器都可能不再⽀持Flash的了，因此在更新原有EasyUI整个框架的时候，我们对框架全⾯进⾏了完善，包括替换了这个Uploadify的⽂件上传模块，使⽤EasyUI内置的FileBox控件，结合Jquery的Ajax操作，我们就可以实现了单⽂件或者多⽂件的上传操作了。

本篇随笔就主要基于这个主题，介绍基于FileBox控件实现⽂件上传处理，包括前端页⾯代码和后端的C#处理代码的操作。

1、FileBox控件的使⽤FileBox控件原理上是⼀个TextBox控件和隐藏的⼀个File控件，因此对于TextBox控件的变化时间onchange依旧可以使⽤，⽽由于其隐藏了File控件，那么需要根据DOM规则获取其下⾯的File控件，从⽽可以获得⽂件列表进⾏Ajax的上传操作，同时由于File⽂件是⼀个特殊的内容，我们在上传的时候，使⽤了JS的FormData对象容器来进⾏承载⽂件信息和其他信息，从⽽能够顺利把⽂件及其他内容信息⼀并通过AJax调⽤，上传到后台去处理。

按照官⽅的⽰例，其实就是定义⼀个HTML元素，并通过脚本⽅式初始化对应的样式和事件即可，如下所⽰。

<input class="easyui-filebox" style="width:300px">//初始化脚本$('#fb').filebox({buttonText: '选择⽂件',buttonAlign: 'left'})这样就可以了。

我们来看看我的实际案例，⼀般需要上传附件的地⽅，包括导⼊Excel⽂件的记录，或者上传⽂件作为记录的附件，前者⼀般是单⽂件的⽅式，⼀次导⼊⼀个Excel⽂件，并加载Excel进⾏展⽰，如下所⽰。

利用layui前端框架实现对不同文件夹的多文件上传

利⽤layui前端框架实现对不同⽂件夹的多⽂件上传利⽤layui前端框架实现对不同⽂件夹的多⽂件上传问题场景：普通的input标签实现多⽂件上传时，只能对同⼀个⽂件夹下的多个⽂件进⾏上传，如果要同时上传两个或多个⽂件夹下的⽂件，是⽆法实现的。

这篇⽂章就是利⽤layui中的插件，解决这个问题。

No file selected前端运⽤layui操作步骤：1、进⼊，下载整个组件2、下载完成后,把名字为layui的⽂件夹放到你的项⽬中进⾏引⽤3、引⽤layui.js和layui.css实现功能4、可点击可进⼊进⾏参考，来以上三步的前端代码实现HTML代码块：<div class="layui-upload"><button type="button" class="layui-btn layui-btn-normal"style="margin-left: 30px"id="testList">选择多⽂件</button><button type="button" class="layui-btn" id="testListAction"style="display: inline; margin-left: 26px;">开始上传</button><div class="layui-upload-list col-md-12"><table class="layui-table" style="margin: 0 0 0 0"><thead style="display: none"><tr><th>⽂件名</th><th>⼤⼩</th><th>状态</th><th>操作</th></tr></thead><tbody id="demoList"></tbody></table></div></div>JS代码块<script>e('upload', function () {var $ = layui.jquery, upload = layui.upload;//多⽂件列表⽰例var demoListView = $('#demoList'), uploadListIns = upload.render({elem: '#testList', url: '/task_mgm/taskinfo_upload', accept: 'file', multiple: true, auto: false, bindAction: '#testListAction', choose: function (obj) {var files = this.files = obj.pushFile(); //将每次选择的⽂件追加到⽂件队列//读取本地⽂件obj.preview(function (index, file, result) {var tr = $(['<tr id="upload-' + index + '">', '<td>' + + '</td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join(''));//单个重传tr.find('.demo-reload').on('click', function () {obj.upload(index, file);});//删除tr.find('.demo-delete').on('click', function () {delete files[index]; //删除对应的⽂件tr.remove();uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名⽂件不可选 });demoListView.append(tr);});}, done: function (res, index, upload) {if (res.code == 0) { //上传成功var tr = demoListView.find('tr#upload-' + index), tds = tr.children();tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');{#tds.eq(3).html(''); //清空操作#}return delete this.files[index]; //删除⽂件队列已经上传成功的⽂件}this.error(index, upload);}, error: function (index, upload) {var tr = demoListView.find('tr#upload-' + index), tds = tr.children();tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显⽰重传}});})</script>Python后端代码块UPLOAD_FOLDER = 'static_files/task_mgm/'# 设置允许上传的⽂件类型ALLOWED_EXTENSIONS = set(['txt', 'png', 'jpg', 'xls', 'JPG', 'PNG', 'xlsx', 'gif', 'GIF', 'ppt', 'pptx', 'doc', 'docx', 'csv', 'sql', 'py','rar'])# ⽤于判断⽂件后缀def allowed_file(filename):return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS@task_mgm.route('/taskinfo_upload',method=['post'])@login_requireddef taskINfo_upload_fun():if request.method == 'POST':# 上传⽂件的键名是fileif 'file' not in request.files:logging.debugp('No file part')return jsonify({'code': -1, 'filename':'', 'msg':'No file part'})# 获取⽂件对象file = request.files['file']# 若⽤户没有选择⽂件就提交，提⽰‘No selected file’if file.filename == '':logging.debug('No selected file')return jsonify({'code': -1', 'filename':'', 'msg':'No selected file'})else:try:if file and allowed_file(file.filename):origin_file_name = file.filenamelogging.debug('filename is %s' % origin_file_name)file_dir = os.path.join(os.getcwd(), UPLOAD_FOLDER)if os.path.exists(file_dir):logging.debug('%s path exist' % file_dir)passelse:logging.debug('%s path not exist' % file_dir)os.makedirs(file_dir)file.save(os.path.join(file_dir, filename))return jsonify({'code':0, 'filename':origin_file_name, 'msg': 'save successfully'})else:logging.debug('%s not allowed' % file.filename)return jsonify({'code':-1, 'filename':'', 'msg': 'File not allowed'})except Exception as e:logging.debug(e)return jsonify({'code':-1, 'filename':'', 'msg':'Error occurred'})else:return jsonify({'code':-1, 'filename': '', 'msg':'Method not allowed'})下⾯简单展⽰⼀下效果图：到此为⽌，前后端代码都有了，可以粘去直接使⽤！！！！。

jqueryajax实现文件上传功能实例代码

jqueryajax实现⽂件上传功能实例代码下⾯看下ajax实现⽂件上传没有使⽤插件⼀、单⽂件上传<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><script src="https:///jquery/1.10.2/jquery.min.js"></script><title></title></head><body><form id="uploadForm" enctype="multipart/form-data">⽂件:<input id="file" type="file" name="file"/></form><button id="upload">上传⽂件</button></body><script type="text/javascript">$(function () {$("#upload").click(function () {var formData = new FormData($('#uploadForm')[0]);$.ajax({type: 'post',url: "http://192.168.1.101:8080/springbootdemo/file/upload",data: formData,cache: false,processData: false,contentType: false,}).success(function (data) {alert(data);}).error(function () {alert("上传失败");});});});</script></html>⼆、多⽂件上传<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><script src="https:///jquery/1.10.2/jquery.min.js"></script><title></title></head><body><form id="uploadForm" enctype="multipart/form-data">⽂件:<input type="file" name="file" multiple="multiple"/><br></form><button id="upload">上传⽂件</button></body><script type="text/javascript">$(function () {$("#upload").click(function () {var formData = new FormData($('#uploadForm')[0]);$.ajax({type: 'post',url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles",data: formData,cache: false,processData: false,contentType: false,}).success(function (data) {alert(data);}).error(function () {alert("上传失败");});});});</script></html>这个是多选上传，关键是multiple="multiple"这个属性，另外使⽤的接⼝也是多⽂件上传的接⼝。

解析Jquery的LigerUI如何实现文件上传

解析Jquery的LigerUI如何实现文件上传本篇文章是对Jquery中的LigerUI实现文件上传的方法进行了分析介绍需要的朋友可以参考下一在Head中加入<script src= /lib/js/ajaxfileupload js type=text/javascript></script> <script src= /lib/js/ligerui expand js type=text/javascript></script> 二 Html中的Div代码复制代码代码如下: <div id="AppendBill_Div" > <% 上传单 %> <table > <tr > <td > 图标: </td> <td><input type=file id="fileupload" name=fileupload/> </td> </tr> </ table> </div>三 Js中写的是关键部分会LigerUI的朋友你懂得 grid中添加项【存地址字段】 { display: "扫描件" name: "AppendBillPath" width: type: "text" align: "left" } Form可添加项【存地址和弹出选择框】 { name: "AppendBillPath " type: "hidden" } // 上传【】{ display: "扫描件" name: "AppendBillPath" boboxName: "AppendBillPath " newline: true labelWidth: width: space: type: "select" options: {}} // 上传【】$ ligerui get("AppendBillPath ") set( onBeforeOpen f_selectAppendBillPath_ ) // 【扫描件】 // 上传【】事件 // #region======================================= 【上传扫描件窗口】 // 上传【】复制代码代码如下: var AppendBillPathDetail = null; function f_selectAppendBillPath_ () { var imageurl = $("#AppendBill") val(); var AppendBill_Id = $("#AppendBill") val(); // 单号if (imageurl length == ) { LG showError("您没有输入单号请输入随单号！"); return; } if (AppendBillPathDetail) { AppendBillPathDetail show(); } else { AppendBillPathDetail = $ ligerDialog open({ target: $("#AppendBill_Div") title: 添加图标width: height: top: left: // 弹出窗口大小 buttons: [ { text: 上传 onclick: function () { AppendBillPath_save(); } } { text: 取消onclick: function () { AppendBillPathDetail hide(); } } ] }); } } function AppendBillPath_save() { var imgurl = $("#fileupload") val(); // var filehelpcode = $("#filehelpcode") val(); var extend = imgurl substring(imgurl lastIndexOf(" ") imgurl length); extend = extend toLowerCase(); if (extend == " jpg" || extend == " jpeg" || extend == " png" || extend == " gif" || extend == " bmp") { } else { LG showError("请上传jpg jpep png gif bmp格式的图片文件"); return; } var imageurl = $("#AppendBill") val(); // extend alert(imageurl); $ ajaxFileUpload({ u rl: " /handle/ImageUpload aspx?imageurl=" + imageurl // 上传【】aspx文件secureuri: false fileElementId: "fileupload" //Input file id dataType: "text" success: function (data status) { // // 保存路径// $("#AppendBillPath ") val(Data); LG tip(data); f_reload(); } error: function (data status e) { LG showError(data); } }); } // #endregion lishixinzhi/Article/program/Java/JSP/201311/20041。

MVC项目使用easyui的filebox控件上传文件

MVC项目使用easyui的filebox控件上传文件开发环境：WIN10+IE11，浏览器请使用IE10或以上版本开发技术框架MVC4+JQuery Easyui+knockoutjs效果为弹出小窗体，如下图1.前端cshtml文件代码(只包含文件上传窗体)。

注意form设置，必须使用form-data传递文件。

注意按钮事件我这里是封装的data-bind="click:closeImportClick"，不要照抄html5可直接在input标签file控件中设置accept属性限制上传文件类型，设置multiple属性可同时上传多个文件<div class="easyui-window"id="import-excel-template"title="文件上传"style="width:400px;height:16 0px;padding:2px;"closed="true"><form id="importFileForm"method="post"enctype="multipart/form-data" style="display:none"><table style="margin:5px;height:70px;"><tr><td>请选择文件</td><td width="5px;"></td><td><input type="file"class="easyui-filebox"id="fileImport"name="fileImport"style="width:260px;"> </td><td></td></tr><tr><td colspan="4"><label id="fileName"/></td></tr><tr><td colspan="4"><label id="uploadInfo"/></td></tr></table><div style="text-align:center;clear:both;margin:5px;"><a id="uploadFile"class="easyui-linkbutton"data-options="iconCls:'icon-ok'"data-bind="click:importFil eClick"href="javascript:void(0)">上传</a><a class="easyui-linkbutton"data-options="iconCls:'icon-cancel'"data-bind="click:closeImportClick"href ="javascript:void(0)">关闭</a></div></form></div>2.ViewModel中js代码:定义上传事件。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

基于jQueryEasyUI框架的动态多文件上传的实现
作者：谷洪彬
来源：《计算机时代》2017年第09期
摘要：很多Web应用系统需要多文件上传功能，实际需求中文件个数并不固定，所以需要系统提供动态添加文件上传文本框功能，这样的功能可以通过JavaScript或者jQuery实现。

为了增强用户友好性，文章用jQuery EasyUI框架实现了多文件上传的界面，并解决了实现过程中遇到的各种问题。

关键词：动态的文件上传； jQuery EasyUI框架；用户友好性； Web应用系统
中图分类号：TP311 文献标志码：A 文章编号：1006-8228（2017）09-45-03
Abstract： Many Web applications need the function of multiple file upload， but the actual demanded number of files is not fixed， so require the system to provide a text box for dynamically adding the files to be uploaded， and this function can be realized by JavaScript or jQuery. In order to enhance the user friendliness， this paper implements the multi-file upload interface with the jQuery EasyUI framework， and solves various problems encountered in the implementation process.
Key words： multi-file upload； jQuery EasyUI framework； user friendliness； Web application system
0 引言
包括OA和CMS在内的很多Web应用系统需要多文件上传功能[1-2]，由于实际应用中文件个数不能实现确定，就需要为用户提供动态添加功能，动态添加文件文本框可以通过JavaScript或者jQuery实现。

用户友好性是Web应用除了功能之外最重要的部分，为了增强用户友好性，文本使用了jQuery EasyUI作为多文件上传的界面。

1 EasyUI的引用和EasyUI实现的单个文件上传文本框界面
1.1 EasyUI的引用
2.3 文件上传功能实现的验证
最后由后端代码来完成文件上传功能，这样的实例代码很多，简单起见，我们用PHP做个各显示上传后文件名的代码片段[5]，真正的文件上传代码还需要自己完善，最好是加上Ajax[6]功能实现后台文件上传：
3 结束语
软件开发除了功能性，用户友好性也越来越重要。

近年Web应用对用户的友好性很重视，这也促进了JavaScript及其框架的发展，开发者初次使用这些框架时，难免会遇到各种各样的问题，会耽误开发进度，但是系统的用户友好性确实得到了极大的提升，这些努力是值得的，而且由于代码和经验可以积累，在以后的项目开发中使用同样的技术，开发效率会提高不少。

下一步需要考虑的是，文件在后台通过Ajax上传，这样不用通过前台form的跳转，用户体验会更好。

参考文献（References）：
[1] 代威，董运成.基于jQuery EasyUI与Spring MVC框架的信
息管理系统自动提示的设计与实现[J].信息与电脑（理论版），2016.13：33-34
[2] 黄培泉.基于.NET与EasyUI的工资查询系统的设计与实现[J].
福建电脑，2013.4：104-106
[3] 麦克皮克，威尔顿.JavaScript入门经典（第5版）[M].清华大学
出版社，2016.
[4] 比尔·比博尔特，叶华达·卡兹.jQuery实战（第3版）[M].华中
科技大学出版社，2016.
[5] 张跃旭，孙文毅，王春来.PHP的文件上传技术[J]. 辽宁师专
学报，2008.6：36-37
[6] 温立辉.AJAX异步交互技术浅析[J].山东工业技术，2017.4.。