ASP 使用 jQuery Ajax File Uploader插件上传文件（适用于支持H5的浏览器）
劳华灿
开篇先吐个槽：自从公司策略调整以后，几乎没有什么3D、AR、VR的项目让我来做了~于是···为了避免被认为无所事事，
只好硬着头皮开始做ASP的项目了~~好在大家用的都是C# ┐(´∀｀)┌
回归正题，当前接手的ASP项目是运行在微信平台的一个上传视频投票的小项目，里面的难点就在于视频上传啦~其他的都是
数据库的操作啥的，就不多说了；虽然说ASP自带文件上传的功能，但是既然有更成熟的插件，那我们就直接拿来用一下好了~
（其实是没时间去自己写这个功能┐(￣ヮ￣)┌）。
今天介绍的插件就是~~jQuery Ajax File Uploader（点击跳转），这个插件功能还是比较齐全的~话不多说，直接上代码~
首先~需要在页面里引入插件（src里的路径按照你的文件目录填写哈）
<script src="/path/to/jquery.dm-uploader.min.js"></script>然后~你得在页面里有一个上传文件的组件
<div class="weui-cell ">
<div id="drag-and-drop-zone" class="weui-cell__hd w100p tac">
<input id="fileupload" type="file" class="ms-star_upload" name=""/>
</div>
</div>
<div align="center">
<progress id="uploadprogress" max="100" style="width: 80%;" value="0"></progress>
</div>接下来就开始配置插件
<script>
$(function () {
$('#drag-and-drop-zone').dmUploader({ //
url: 'UpLoaded.ashx?count='+$('#count').val(),//处理上传事件的脚本地址，可以通过get方式传参
maxFileSize: 3000000, // 文件上限 ，目前为3M
auto: false, //是否为自动上传（即选择文件后是否自动上传），默认为true
multiple: false, //是否是多文件，默认为true，但是在IOS端设置为true的话上传相册会出问题，为了ios能够识别，建议设置为false
allowedTypes: "video/*", //允许的文件类型
extFilter: ['mp4','mov'], //允许的文件后缀名
onInit: function () { //初始化函数
// Plugin is ready to use
console.log('Penguin initialized :)', 'info');
},
onFileSizeError: function (file) { //当文件大小超出最大值时回调次函数
showWindow('大小不能超过30M'); //弹窗显示内容，这个需要自己写啦~或者用alert（‘大小不能超过30M’）也是可以的~
},
onFileTypeError: function (file) { //当文件类型错误时回调次函数
showWindow('仅支持上传视频');
},
onFileExtError: function (file) { //当文件后缀名错误时回调次函数
showWindow('仅支持上传mp4和mov格式视频');
},
onComplete: function () { //上传结束后回调此函数
// All files in the queue are processed (success or error)
console.log('All pending tranfers finished');
},
onNewFile: function (id, file) { //选择新文件时回调此函数
// When a new file is added using the file selector or the DnD area
console.log('New file added #' + id);
},
onBeforeUpload: function (id) { //上传前调用此函数
// about tho start uploading a file
$('#uploadprogress').show();
},
onUploadProgress: function (id, percent) { //上传过程中调用此函数
// Updating file progress
$('#uploadprogress').val(percent);
$('#uploadprogress').text(percent + '%');
},
onUploadSuccess: function (id, data) { //上传成功回调函数
// A file was successfully uploaded
showWindow('视频上传成功!');
console.log('Server Response for file #' + id + ': ' + JSON.stringify(data));
console.log('Upload of file #' + id + ' COMPLETED', 'success');
},
onUploadError: function (id, xhr, status, message) {//上传出错回调函数
// Happens when an upload error happens
showWindow(JSON.stringify(message));
console.log(id + 'danger' + message);
}
});
});
</script> <script>
function uploadFile() {
$("#drag-and-drop-zone").dmUploader("start", fileid);
}
</script> /// <summary>
/// UpLoaded 的摘要说明
/// </summary>
public class UpLoaded : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int _count = Convert.ToInt32(context.Request["count"]);
HttpPostedFile MyFile = context.Request.Files[0];
string[] Mystr = MyFile.FileName.Split('.');
if (MyFile == null || Mystr.Length < 1)
{
context.Response.Write("未知错误！");
return;
}
//类型鉴别
if (Mystr[1] != "MP4" && Mystr[1] != "mov")
{
context.Response.Write("模型文件类型错误");
return;
}
string MdoelPath = context.Server.MapPath("~/UploadFile/");//文件上传存储
if (!Directory.Exists(MdoelPath))//如果不存在就创建file文件夹
{
Directory.CreateDirectory(MdoelPath);
}
MyFile.SaveAs(MdoelPath + MyFile.FileName);
context.Response.Write("true." + MyFile.FileName);
VideoProxy.GetInstance().UploadVideo(Mystr[0], "~/UploadFile/" + MyFile.FileName, _uid, _activityid);
}
public bool IsReusable
{
get
{
return false;
}
}
}
1.配置方法要写到上传组件下方
2.IOS设备录制完的视频是MOV格式，所以上传后缀名限制那里一定要加上mov
2.IOS设备录制完的视频是MOV格式，所以上传后缀名限制那里一定要加上mov
类似资料：