由于公司需要做上传需求,查看很多文档发现有个插件叫做uploadify可以实现该需求(文档:http://www.uploadify.com/documentation/) ,中文API参照:

    uploadify是基于flash的,现在HTML5广泛应用,所以选择了UploadiFive(基于H5开发的,下载尼玛的还要钱,谷歌很多免费,请自行下载)

<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="/static/static_20160810/xuanxiu/css/uploadifive.css">
<script src="jquery.uploadifive.min.js"></script>


<input id="yyzz" name="file" class="yyzz" type="file" multiple="true">

           var fd = {"token":$("input[name='token']").val() #获取token,需后台处理传过来
           $("#yyzz").uploadifive({
               'uploadScript' : 'http://upload.qiniu.com/',
               'buttonText': "",
               'auto': true,
               'width': 60,
               'height': 60,
               'method': 'post',
               'queueID': 'queue',
               'fileObjName' : 'file', #由于七牛需要定义这个参数名为file
               'onAddQueueItem' : function(file) {
                  fd["key"] = 'media/'+ file.name  #修改上传到七牛的文件名
               },
               'formData'     : fd,
               'removeCompleted':false,
               'fileType'     : 'image/*',

               'onUploadComplete' : function(file, data) {  #成功或者失败都回调该函数
               	console.log(file);

               }
           });

 

效果如下: