admin管理员组文章数量:1122855
jQuery
关于文件上传的插件网上有太多了。但是呢，做的特别好的，特别漂亮的上传插件对于IE低版本的兼容性不好，甚至有的不支持。这里我先说说jquery-file-upload这款插件，兼容性好。至于其他的上传插件，例如uploadify、swfupload、dropzone等，后期我会抽出时间，将我在项目中使用心得都写出来。共同学习，有不足之处欢迎指正。
示例图：
1.首先是下载资源
（github上面写的demo太乱，新手即使下载下来，也不知道如何跑的起来，这就是我写这篇博文的原因。希望写一个很简单的实例，让新手快速的掌握。但是我们所需的资源也可以从demo上下载，取我们需要的即可）
我自己整理的资源地址：
git下载地址：
/
需要用到的下载资源清单：
js：
jquery-3.0.0.min.js：最好是最新版本
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
css：
jquery.fileupload.css
jquery.fileupload-ui.css
2.编写实例
前台页面jsp：
<%--Created by IntelliJ IDEA.User: zzDate: 2016/8/31Time: 9:02To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>jquery file upload</title><script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery-3.0.0.min.js"></script><script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.ui.widget.js"></script><script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.iframe-transport.js"></script><script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.fileupload.js"></script><link rel="stylesheet" href="${pageContext.request.contextPath}/resources/testJqueryUpload/css/jquery.fileupload.css"><link rel="stylesheet" href="${pageContext.request.contextPath}/resources/testJqueryUpload/css/jquery.fileupload-ui.css"><style>.btn-success{display:inline-block; padding:0 0px;height:36px;background:#e7f1ff 6px center no-repeat;border-radius:5px;border:1px solid #89aede; line-height:35px;color:#3b83e1; font-weight:bold; cursor:pointer;text-align:center; min-width:100px; }.btn-success:hover{ background-color:#dbeafe;}.btn_blue{background-color: #E7F1FF;}.btn_blue:hover{ background-color: #89aede;}#center { padding-top: 100px }</style>
</head>
<body>
<div id="center" align="center"><%--<input id="fileId" type="file" name="file" data-url="${pageContext.request.contextPath}/uploadfile" multiple>--%><%--<p></p>--%><span class="btn btn-success fileinput-button"><span>选择文件</span><input id="fileId" type="file" name="file" multiple></span><div id="files" class="btn_blue" style="width: 400px;height: 200px;"></div>
</div>
</body><script>(function(){$('#fileId').fileupload({url: '${pageContext.request.contextPath}/uploadfile',done: function (e, data) {alert('I love my girl friend-JOAN');$('#files').append(data.result.name+'<br>');},fail: function () {alert('出错');}});})();
</script></html>3.后台接收
我这里用的是springmvc，写了一个controller。
@RequestMapping("/uploadfile")@ResponseBodypublic Map jqueryUploadFile(MultipartFile file){System.out.println(file.getOriginalFilename());Map map=new HashMap();map.put("name",file.getOriginalFilename());return map;}源码差不多就这样了。如果以上代码拷贝之后跑不起来的童鞋，可以下方留言。
本文标签： jQuery
版权声明：本文标题：jQuery 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1686520312a5260.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论