ASP 使用 jQuery Ajax File Uploader插件上传文件(适用于支持H5的浏览器)
2018-02-04 14:35
1286 查看
开篇先吐个槽:自从公司策略调整以后,几乎没有什么3D、AR、VR的项目让我来做了~于是···为了避免被认为无所事事,
只好硬着头皮开始做ASP的项目了~~好在大家用的都是C# ┐(´∀`)┌
回归正题,当前接手的ASP项目是运行在微信平台的一个上传视频投票的小项目,里面的难点就在于视频上传啦~其他的都是
数据库的操作啥的,就不多说了;虽然说ASP自带文件上传的功能,但是既然有更成熟的插件,那我们就直接拿来用一下好了~
(其实是没时间去自己写这个功能┐( ̄ヮ ̄)┌)。
今天介绍的插件就是~~jQuery Ajax File Uploader(点击跳转),这个插件功能还是比较齐全的~话不多说,直接上代码~
首先~需要在页面里引入插件(src里的路径按照你的文件目录填写哈)
然后~你得在页面里有一个上传文件的组件
接下来就开始配置插件
选择文件后开始上传(此方法可以绑定到上传按钮上面)
下面的是ASP的上传处理脚本
如此就ok啦~要注意以下几点:
1.配置方法要写到上传组件下方
2.IOS设备录制完的视频是MOV格式,所以上传后缀名限制那里一定要加上mov
只好硬着头皮开始做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
相关文章推荐
- Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
- JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
- JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
- Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
- Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传
- ASP.NET- 无刷新上传使用jQuery插件之ajaxFileUpload
- jQuery上传文件插件AjaxFileUpload的使用
- jquery 实现ajax 上传文件的功能(使用插件 ajaxfileupload)
- 异步上传文件插件AjaxFileUploader在Asp.net MVC中应用
- jQuery 文件上传插件ajaxFileUpload使用以及onchange问题
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)
- 使用jquery插件ajaxfileupload一次上传多个文件,示例
- jquery ajaxFileUpload.js插件支持多文件上传的方法
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传
- jquery之ajaxfileupload异步上传,文件上传插件
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- Struts2 Ajax文件上传功能 使用Jquery.form插件
- asp.net ajax AjaxFileUpload使用 多文件上传
- 使用jquery插件uploadify结合commons fileupload实现多文件上传