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

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

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

    1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示 ...

  2. 【django】ajax,上传文件,图片预览

    1.ajax 概述: AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  3. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

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

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  5. DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...

  6. TP3.2批量上传文件(图片),解决同名冲突问题

    1.html <form action="{:U('Upload/index')}" enctype="multipart/form-data" meth ...

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

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

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

    JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...

  9. html页面选择图片上传时实现图片预览功能

    实现效果如下图所示 只需要将下面的html部分的代码放入你的代码即可 (注意引入jQuery文件和html头部的css样式,使用的是ajax提交) <!-- 需引入jQuery 引入样式文件 引 ...

随机推荐

  1. name

    问题 A: name 时间限制: 1 Sec  内存限制: 256 MB 题目描述 lpq同学最近突然对外国人的名字产生了兴趣,特别是外国女生的名字,于是他开始试图去认识一些国外的女生. 随着认识的女 ...

  2. C/C++中二进制与文本方式打开文件的区别

    二进制与文本文件主要有两个大的区别: 1.换行符的区别: Windows平台下  对于Windows文本文件,它们使用回车和换行来表示换行符:如果以“文本”方式打开文件,当读取文件的时候,系统会将所有 ...

  3. c++ 链表基础功能实现

    #include<stack> struct ListNode { int m_nValue; ListNode* m_pNext; }; ListNode* CreateListNode ...

  4. 饮冰三年-人工智能-linux-01通过VM虚拟机安装contes系统

    先决条件:VM虚拟机的安装.contes系统的镜像文件 1:创建新的虚拟机 2:下一步,稍后安装操作系统 3:选择对应的系统 4:选择对应的路径 至此虚拟机已经创建完成(相当于买了一台新电脑) 5:编 ...

  5. 20165206 2017-2018-2《Java程序设计》课程总结

    20165206 2017-2018-2<Java程序设计>课程总结 一.每周作业链接汇总 预备作业1:对师生关系的看法和期望 预备作业2:c语言基础和学习技能的理解 预备作业3:Linu ...

  6. Linux(centos)系统各个目录的作用详解 推荐

    文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码.SHELL脚本.二进制的可执行文件等,可用cat ...

  7. 微信小程序API 登录-wx.login(OBJECT) + 获取微信用户唯一标识openid | 小程序

    wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key).用户数据的加解密通讯需要 ...

  8. oracle创建用户和密码以及授权登录问题

    创建有户名和密码CREATE USER 用户名 IDENTIFIED BY 密码;分配权限GRANT connect,dba to 用户名; 1:使用oracle的命令行登录oracle的方式(安装好 ...

  9. Hadoop的namenode的管理机制,工作机制和datanode的工作原理

    HDFS前言: 1) 设计思想 分而治之:将大文件.大批量文件,分布式存放在大量服务器上,以便于采取分而治之的方式对海量数据进行运算分析: 2)在大数据系统中作用: 为各类分布式运算框架(如:mapr ...

  10. Orchard是如何工作的?

    文章翻译自http://docs.orchardproject.net/Documentation/How-Orchard-works 对Orchard的理解还不深刻,翻译可能有不好的地方.     ...