jQuery.fileupload是一个比较通用的控件,如果是简单使用的话,也非常方便:
第一步引入相应的css跟js
<link rel="stylesheet" href="/skins/skyblue/jquery.fileupload.css">
<script src="/codebase/fileupload/vendor/jquery.ui.widget.js"></script>
<script src="/codebase/fileupload/jquery.iframe-transport.js"></script>
<script src="/codebase/fileupload/jquery.fileupload.js"></script>
第二部 在jsp或者html界面放入相应的form跟点击需要触发的按钮
我这里是用js动态生成html,插入到界面的一个div
var formId = "fileupload" + GoingUtils.getUUid(3, false);
var imgPath = "/going-bs-dhtmlx/codebase/toolbar/imgs/" + opts.img;
var iframeHtml = '<form id="' + formId + '" action="" method="POST" enctype="multipart/form-data">' +
'<div class="contentDiv">' +
'<span class="btn btn-success fileinput-button">' +
'<div style="float:left;width:20px;height:20px;position: relative;left:-2px;top:0px"><img src="' + imgPath + '"></div>' +
'<span style="float:left;position: relative;left:-2px;top:5px"><span>上传</span>' +
'<input type="file" name="files" multiple>' +
'</span></span>' +
'</div>' +
'</form>';
$("#fileDiv").html(iframeHtml);
第三步就是初始化控件
var opts={
url:"",
initSubmitFormData:function(e,data){
//点击提交时,通过该函数来相后台提交相关参数
data.formData = {projectId: $.Cookies.get("curProjectId")};
},
fun:function(){
//执行上传操作成功后,回调函数
},
}
var bid = GoingUtils.getUUid(5, false);
if (AssertUtils.isNotNull($("#" + formId).fileupload)) {
$("#" + formId).fileupload({
url: opts.url + "?bid=" + bid + "&filleType=excel&sessionId=" + top.sessionId + "&fileName=IMG_0048.JPG&userfile=systemFileControlfile1",//文件上传地址,当然也可以直接写在input的data-url属性内
dataType: 'json',
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 1000000, // 10 MB
done: function (e, result) {
var record = new Record(result.result);
opts.fun();
},
progressall: function (e, data) {//设置上传进度事件的回调函数
}
})
//就是通过该方法实现, 提交时往后台传递参数
$("#" + formId).bind('fileuploadsubmit', function (e, data) {
opts.initSubmitFormData(e, data);
});
} else {
GoingUtils.showErrorMessage("请加载fileupload相应组件的js");
}