首页 > 代码库 > jquery fileupload plugin

jquery fileupload plugin

2024-10-26 20:55:39   210人阅读

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});    })})

 

jquery fileupload plugin


联系
我们