前言
之前用过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 版权协议,转载请附上原文出处链接和本声明。