jquery.html5uploader.js 上传控件

插件地址:http://blog.csdn.net/never_say_goodbye/article/details/8598521

先上个效果图:

相比来说,效果还是很不错的

使用MVC3做服务器端的处理时遇到的一大问题是HttpPostedFileBase为null,request.file也为null,这是上面的博客中没有提到的(PHP),一番潜心研究中,发现了Request.InputStream中有数据,于是乎:

[HttpPost]
        public JsonResult FileUpload()
        {
            Stream RequestStream =HttpContext.Request.InputStream;//把文件的数据读取到st流中
            if (RequestStream == null)
            {
                return Json(new { msg=0,msgbox="上传的文件为空"});//"上传的文件为空";
            }

            string file_name =  HttpContext.Request.Headers["X_FILENAME"].ToString();
            if(string.IsNullOrWhiteSpace(file_name))
            {
                return Json(new { msg = 0, msgbox = "文件名为空" });//"文件名为空";
            }
            int last_Index = file_name.LastIndexOf(".");
            string fileExt = file_name.Substring(last_Index+1,file_name.Length -last_Index -1); //得到文件的拓展名,不包含“.”
            string saveFloder = Server.MapPath("/uploads/"); //保存的文件路径
            if (!Directory.Exists(saveFloder)) //如果该文件夹不存在, 则创建
            {
                Directory.CreateDirectory(saveFloder);
            }
            string save_name = Guid.NewGuid().ToString()+"."+fileExt; //保存的文件名
            ////创建一个文件流来把上传的文件写入到服务器上
            FileStream fs = new FileStream(saveFloder + save_name, FileMode.Create, FileAccess.Write, FileShare.Read);
            byte[] buffer = new byte[1024];//缓冲区
            int readLen;//每次真正读取到的字节数
            while ((readLen = RequestStream.Read(buffer, 0, 1024)) > 0)
            {
                //读到数据了(此时独到的数据在buffer缓冲区中)
                //开始把文件写入到服务器的磁盘中
                fs.Write(buffer, 0, readLen);
            }

            fs.Flush();//请空缓冲区,使得所有缓冲区的数据都写入到文件中
            RequestStream.Flush();
            fs.Close();//关闭流,释放资源
            RequestStream.Close();
            return Json(new { msg = 1, msgbox = "/uploads/" + save_name });
        }

目前没有测试过大文件上传的情况及其性能

时间: 2024-10-01 10:25:30

jquery.html5uploader.js 上传控件的相关文章

jquery文件批量上传控件Uploadify3.2(java springMVC)

人比較懒  有用为主 不怎么排版了 先放上Uploadify的官网链接:http://www.uploadify.com/  -->里面能够看到PHP的演示样例,属性说明,以及控件下载地址.分flash版(免费)和html5版(收费). 官网上能够看到效果演示. 另外在网上找到了一份Uploadify3.2的中文API文档.能够在我上传的资源里面下载. 以下就是一个基于springMVC的文件上传演示样例,看起来可能比文档更直观一些··· 1.下载插件放到项目中 2.在jsp页面中引入下面JS和

jquery文件上传控件 Uploadify

(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图

jquery文件上传控件 Uploadify(转)

原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图:

Js获取file上传控件的文件路径总结

总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = function(){ alert(getFullPath(this)) } function getFullPath(obj){ if(!obj){return;} if(!-[1,]){obj.select();return document.selection.createRange().text;} r

百度 flash html5自切换 多文件异步上传控件webuploader基本用法

双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 若页面需默认用ie标准内核,增加标签

对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供

Jquery AjaxFileUpload.js 上传文件 所遇问题解决办法

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">导入 AjaxFileUpload.js 文件</span> js代码 $.ajaxFileUpload({ url: 'upload',//处理图片脚本 secureuri : false, fileElementId : 'uploadImg',//file控件id da

文件上传~Uploadify上传控件~续(多文件上传)

对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Uploadify是通过轮训的方式去调用我们的后台upload程序的,所以,对于多文件上传来说,也没什么稀奇的. 下面是文件上传后的缩略图如下 列表的组装使用JS模板,这样对于复杂的HTML结构来说,可以减少拼写错误的出现,关闭是将LI元素从UI元素移除,最后提交时,从UI里检查LI元素,然后对它进行组装,并进

JQ_Web Uploader图片上传控件

HTML <div id="uploader">    <div id="j_stat">    <input type="text" name="thumb" id="j_tb" value="" />    </div>    <div id="j_file">选择文件</div>    &l