您的位置:首页 > Web前端 > JQuery

ASP 使用 jQuery Ajax File Uploader插件上传文件(适用于支持H5的浏览器)

2018-02-04 14:35 1286 查看
  开篇先吐个槽:自从公司策略调整以后,几乎没有什么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>

 下面的是ASP的上传处理脚本

/// <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;
}
}
}

 如此就ok啦~要注意以下几点:
 1.配置方法要写到上传组件下方
 2.IOS设备录制完的视频是MOV格式,所以上传后缀名限制那里一定要加上mov
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Jquery ASP H5上传