C# 结合html5 批量上传文件和图片预览

html5 新特性

<input id="imgsf" type="file" name="imgsf" multiple  />

input  file 中增加 multiple   属性可以选择多文件。IE9以下版本不兼容

<form id="form1" method="post" action="upload_json.ashx" enctype="multipart/form-data">

<div>

<input id="imgsf" type="file" name="imgsf" multiple  />

<input type="text" name="ceshi" value="panlitao" >

<input type="submit" value="提交" />

</div>

</form>

//预览js

<div id="imgrq">

</div>

<script type="text/javascript">

$("#imgsf").change(function () {

var filedx = 0;

for (var i = 0, j = this.files.length; i < j; i++) {

$("#imgrq").append("<img  src=\"" + window.URL.createObjectURL(this.files[i]) + "\" width=\"100\" height=\"100\" />");

}

});

</script>

C# 代码

public class upload_json : IHttpHandler

{

// private HttpContext context;

public void ProcessRequest(HttpContext context)

{

String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1);

//文件保存目录路径

String savePath = "attached/";

//文件保存目录URL

String saveUrl = aspxUrl + "attached/";

//定义允许上传的文件扩展名

Hashtable extTable = new Hashtable();

extTable.Add("image", "gif,jpg,jpeg,png,bmp");

//extTable.Add("flash", "swf,flv");

//extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");

//extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

//最大文件大小

int maxSize = 1000000;

//  this.context = context;

String newFileName = "";

for (int i = 0; i < context.Request.Files.Count;i++ )

{

HttpPostedFile imgFile = context.Request.Files[i];

if (imgFile == null)

{

showError("请选择文件。");

}

String dirPath = context.Server.MapPath(savePath);

if (!Directory.Exists(dirPath))

{

showError("上传目录不存在。");

}

String dirName = context.Request.QueryString["dir"];

if (String.IsNullOrEmpty(dirName))

{

dirName = "image";

}

if (!extTable.ContainsKey(dirName))

{

showError("目录名不正确。");

}

String fileName = imgFile.FileName;

String fileExt = Path.GetExtension(fileName).ToLower();

if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)

{

showError("上传文件大小超过限制。");

}

//修改为文件流去判断文件格式

// string exPath = mall_bll.Common.isfilltype(stream: imgFile.InputStream).ToLower();

//  if (exPath != "jpg" && exPath != "gif" && exPath != "bmp" && exPath != "png")

//   { showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。"); }

//if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(‘,‘), fileExt.Substring(1).ToLower()) == -1)

//{

//    showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。");

//}

//创建文件夹

dirPath += dirName + "/";

saveUrl += dirName + "/";

if (!Directory.Exists(dirPath))

{

Directory.CreateDirectory(dirPath);

}

String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);

dirPath += ymd + "/";

saveUrl += ymd + "/";

if (!Directory.Exists(dirPath))

{

Directory.CreateDirectory(dirPath);

}

newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;

String filePath = dirPath + newFileName;

imgFile.SaveAs(filePath);

}

String fileUrl = saveUrl + newFileName;

Hashtable hash = new Hashtable();

hash["error"] = 0;

hash["url"] = fileUrl;

context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");

//   context.Response.Write(JsonMapper.ToJson(hash));

context.Response.End();

}

private void showError(string message)

{

Hashtable hash = new Hashtable();

hash["error"] = 1;

hash["message"] = message;

//   context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");

//   context.Response.Write(JsonMapper.ToJson(hash));

//     context.Response.End();

}

public bool IsReusable

{

get

{

return true;

}

}

}

时间: 2024-11-02 23:37:35

C# 结合html5 批量上传文件和图片预览的相关文章

Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览

1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\TestFile.txt)来指定要上载的文件.用户也可以通过单击“浏览”按钮,然后在“选择文件”对话框中定位文件来选择文件.  

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术:HTML5的api,作为一名前端的菜鸟,没什么可说的,直接分享自己学习的资料: 关于HTML5 的这些新的特性大家可以到Mozilla的开发者社区MDN https://developer.mozilla.org/zh-CN/ 上查HTML5的资料 还有就是发掘到的比较牛逼的一篇博客:http:/

php上传文件及头像预览

<form id="sc" action="shangchuan.php" target="hidden_frame" method="post" enctype="multipart/form-data"> <div id="yl" style="margin-left:0px; width:144px; height:170px; background-s

JavaScript图片上传前的图片预览功能

JS代码: 1 //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 2 function PreviewImage(fileObj, imgPreviewId, divPreviewId) { 3 var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value; 4 v

上传文件之前本地预览

<script type="text/javascript"> $(document).ready(function () { $("#File1").bind("change", function () { var f = document.getElementById('File1').files[0]; var src = window.URL.createObjectURL(f); $("#img1").a

jQuery之批量上传文件插件之一

$("#uploader").plupload({     /*常规设置*/     runtimes:'html5,flash,silverlight,html4',     url:'hyzx/seller/commPicUpload.action',     /*最大文件限制b, kb, mb, gb, tb */     max_file_size:'1mb',     /*是否生成唯一文件名,如果为true会为上传的文件唯一的文件名.*/     unique_names:t

Android网络编程之使用HttpClient批量上传文件

请尊重他人的劳动成果,转载请注明出处:Android网络编程之使用HttpClient批量上传文件 我曾在<Android网络编程之使用HTTP访问网络资源>一文中介绍过HttpCient的使用,这里就不在累述了,感兴趣的朋友可以去看一下.在这里主要介绍如何通过HttpClient实现文件上传. 1.预备知识: 在HttpCient4.3之前上传文件主要使用MultipartEntity这个类,但现在这个类已经不在推荐使用了.随之替代它的类是MultipartEntityBuilder. 下面

不带插件 ,自己写js,实现批量上传文件及进度显示

今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是自己想要的.然后自己查阅各种资料,经过自己总结,最终完成了这个功能. 如果大家有什么问题可以提出来,一起交流,学习.有什么不对的地方也指出来,我也虚心学习.自己也是刚写博客,您们的赞是我写博客的动力,谢谢大家. 条件:我采用struts2,java ,ajax,FormData实现; 1.实现的逻辑