demo :https://blueimp.github.io/jQuery-File-Upload/
github:https://github.com/blueimp/jQuery-File-Upload
api:https://github.com/blueimp/jQuery-File-Upload/wiki/API
最近总是遇到上传问题,一直使用的都是jquery-fileupload这款插件, 有详细的Api文档,具体用法就不做详细描述了。
只说填过的坑。
(1)自动 上传 与非自动,用户触发,
$(‘#fileupload‘).fileupload({ add: function (e, data) { //绑定触发按钮事件 $.("#okBtn").on("click",function(){ data.submit(); }) } });
(2)IE8,9图片预览问题
以前的博客里写过对这个的封装方法,大家可以翻一下瞅瞅;
(3)IE8 input框用户点击事件
“input=file”,获取文件时,在IE8下无法通过某个按钮click事件间接触发input=file的change事件,
如果设计里这么要求了,可以用样式解决,将input透明 置于上层,放原按钮位置之上
(4)选择之后,事件取消 abort
var jqXHR = $(‘#fileupload‘).fileupload(‘send‘, {files: filesList}) .error(function (jqXHR, textStatus, errorThrown) { if (errorThrown === ‘abort‘) { alert(‘File Upload has been canceled‘); } }); $(‘button.cancel‘).click(function (e) { jqXHR.abort(); });
(5)多文件一次一条请求上传
<form > <input name="file1[]" type="file" multiple /> <br /> <input name="file2[]" type="file" multiple /> <br /> <input name="file3[]" type="file" multiple /> <br /> <button>send by fileupload send api</button> </form>
$(document).ready(function(){ var filesList = [], paramNames = [], elem = $("form"); file_upload = elem.fileupload({ formData:{extra:1}, autoUpload: false, fileInput: $("input:file"), }).on("fileuploadadd", function(e, data){ filesList.push(data.files[0]); paramNames.push(e.delegatedEvent.target.name); }); $("button").click(function(e){ e.preventDefault(); file_upload.fileupload(‘send‘, {files:filesList, paramName: paramNames}); }) })
时间: 2024-10-31 05:53:13