前言

之前用过Uploadify控件实现文件上传的功能，并还写过一篇博文（具体链接文件上传）。说到这儿，再次吐槽CSDN，调整网站把旧博文也变丑了，自己都不想看。算了，不说了，再回到当前话题，说一下如何通过uploadifive（uploadify的H5版本）实现文件上传功能。

为何选择uploadifive

(1)、因为uploadify用到了flash，而flash将会被弃用；（2）、希望能够在移动端实现文件上传

具体实现

前端Html代码

//在前端的界面中增加相关引用
<html>
	<head>
		...
		//添加相关样式
		<link href="~/Scripts/styles/uploadifive.css" rel="stylesheet" />
	</head>
	<body>

		<!--前端界面的代码-->
		<div id="upload_div_diag" style="display:none">
        	<div id="queue"></div>  <!--用于显示进度-->
        	<input id="file_upload" name="file_upload" type="file"> <!--文件上传等内容-->
	    </div>


		//添加js文件	
		<script src="~/Scripts/chatScript/jquery.min.js"></script>
    	<script src="~/Scripts/chatScript/jquery-ui.js" type="text/javascript"></script>
    	<script src="~/Scripts/chatScript/jquery.uploadifive.js"></script>
	</body>
</html>

JS端的代码

$('#file_upload').uploadifive({
        'auto': false, //不要选中文件后立刻上传
        'fileObjName': 'fileData', //后端方法的参数名称
        'fileType': 'image/*', //上传的文件类型
        'queueID': 'queue', //用于显示上传进度的区域ID
        'uploadScript': '/Consultation/upLoad', //后台处理上传的方法
        'method': 'post',
        'buttonText': '选择图片', //按钮的名称
        //同时上传的参数，这儿有个坑，后面说
        'formData': {
            'id': $("#current_id").val(),
            'consultationid': $("#consultation_id").val()
        },
        'uploadLimit': 0, //是否限定上传数量。0：不限定
        'queueSizeLimit': 0, //是否限定
        'onUploadComplete': function (file, data) { //每个文件上传OK后的回调方法
            var revice_data_array = JSON.parse(data);
            if (revice_data_array.result) 
            {
                
            } else {
                alert(revice_data_array.msg);
            }
        },
        'onQueueComplete': function (uploads) { //全部上传成功后的回调方法
            $("#queue").children().remove();
            $("#upload_div_diag").dialog("close");
        }
    });

具体参数可以到网上查看，百度一搜就出来，写的还特别详细。因此就不展开细说了。
说一下这儿（formData）的坑。
uploadifive不支持动态传值。它只能传递html界面初始化时的元素的值。
例如：我界面中有以下两个文本框

    <input type="text" id="current_id" style="display:none"   value=@Model.LoginID>
    <input type="text" id="consultation_id" style="display:none"  >

当我使用如下的代码传值时

		'formData': {
            'id': $("#current_id").val(),
            'consultationid': $("#consultation_id").val()
        },

id参数是有值，而consultationid参数是无值的。即，uploadifive无法动态传值，要想动态传值，需要通过设定参数的方式实现。如下代码所示

 $('#file_upload').data('uploadifive').settings.formData = {
                        'id': $("#current_id").val(),
                        'consultationid': $("#consultation_id").val()
                    };
 $('#file_upload').uploadifive('upload'); //触发上传

所以，你需要在另外地方出发这个代码（例如点击按钮类似）
上传的样式
具体实现如上图所示：选择图片的按钮（图中的1）使用的是初始化的代码；而“上传”按钮（图中的2）的click事件，触发了上传的动作。

后端代码

		//string id, string consultationid为我业务需要的两个参数数据
		//此处JSON转换用到了 using Newtonsoft.Json;
       public string upLoad(HttpPostedFileBase fileData,string id, string consultationid)
        {
            var message = new { result = false, msg = "init",appendmsg="", appendfilename = "" };
            try
            {
                if (fileData == null || String.IsNullOrEmpty(fileData.FileName) || fileData.ContentLength == 0)
                {
                    message = new { result = false, msg = "接收参数异常，文件为null", appendmsg = "",appendfilename="" };
                    return JsonConvert.SerializeObject(message);
                }

                string base_path = createDirectory(id, consultationid);
                string filename = System.IO.Path.GetFileName(fileData.FileName);
                string full_path = Path.Combine(base_path, filename);

                //判断是否存在，若存在，则删除文件
                if (System.IO.File.Exists(full_path)) System.IO.File.Delete(full_path);
				//文件保存
                fileData.SaveAs(full_path);
                message = new { result = true, msg = "ok", appendmsg = full_path, appendfilename = filename };

                return JsonConvert.SerializeObject(message);
            }
            catch(Exception ex)
            {
                message = new { result = true, msg = "发生异常！异常信息如下："+ex.Message, appendmsg = "", appendfilename = "" };
                return JsonConvert.SerializeObject(message);
            }
        }

以上。

代码下载

使用百度云盘，下载地址：源码下载，提取码：NHZL

更新

2021-2-24更新

包含的方法

'onAddQueueItem'   : function(file) {},                        // Triggered for each file that is added to the queue
'onCancel'         : function(file) {},                        // Triggered when a file is cancelled or removed from the queue
'onCheck'          : function(file, exists) {},                // Triggered when the server is checked for an existing file
'onClearQueue'     : function(queue) {},                       // Triggered during the clearQueue function
'onDestroy'        : function() {}                             // Triggered during the destroy function
'onDrop'           : function(files, numberOfFilesDropped) {}, // Triggered when files are dropped into the file queue
'onError'          : function(file, fileType, data) {},        // Triggered when an error occurs
'onFallback'       : function() {},                            // Triggered if the HTML5 File API is not supported by the browser
'onInit'           : function() {},                            // Triggered when UploadiFive if initialized
'onQueueComplete'  : function() {},                            // Triggered once when an upload queue is done
'onProgress'       : function(file, event) {},                 // Triggered during each progress update of an upload
'onSelect'         : function() {},                            // Triggered once when files are selected from a dialog box
'onUpload'         : function(file) {},                        // Triggered when an upload queue is started
'onUploadComplete' : function(file, data) {},                  // Triggered when a file is successfully uploaded
'onUploadFile'     : function(file) {},                        // Triggered for each file being uploaded

重点

也可以在onSelect等方法中实现动态传参

版权声明：本文为zlbcdn原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/zlbcdn/article/details/105434252