码迷,mamicode.com
首页 > Web开发 > 详细

jquery fileupload plugin

时间:2017-07-15 16:52:32      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:change   code   cancel   ror   按钮   alert   描述   获取文件   插件   

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

标签:change   code   cancel   ror   按钮   alert   描述   获取文件   插件   

原文地址:http://www.cnblogs.com/fnncat/p/7183215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!