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;
}
}
}C# 结合html5 批量上传文件和图片预览的更多相关文章
- Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览
1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示 ...
- 【django】ajax，上传文件，图片预览
1.ajax 概述: AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...
- TP3.2批量上传文件（图片），解决同名冲突问题
1.html <form action="{:U('Upload/index')}" enctype="multipart/form-data" meth ...
- html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- JavaScript图片上传前的图片预览功能
JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...
- html页面选择图片上传时实现图片预览功能
实现效果如下图所示 只需要将下面的html部分的代码放入你的代码即可 (注意引入jQuery文件和html头部的css样式,使用的是ajax提交) <!-- 需引入jQuery 引入样式文件 引 ...
随机推荐
- 20165314 2016-2017-2 《Java程序设计》第7周学习总结
20165314 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 MySQL数据库管理系统 连接MySQL数据库 JDBC 批处理 代码托管
- Nginx详解十四：Nginx场景实践篇之代理服务
代理的作用 Nginx代理 正向代理 反向代理 正向代理和反向代理的区别:代理的对象不一样 正向代理代理的对象是客户端,反向代理代理的对象是服务端 反向代理: 配置语法:proxy_pass URL; ...
- linux的systemctl服务及其使用
一.systemd 系统初始化程序,系统开始的第一个进程,PID为1 二.systemctl命令 systemctl list-units ##列出当前系统服务的状态 systemctl lis ...
- vs2017初学c++环境配置及使用教程
https://blog.csdn.net/jmpan_sjtu/article/details/79053169 https://blog.csdn.net/luoyu510183/article/ ...
- 实战--Keepalived和LVS实现负载高可用
显然,只有上一篇的操作,在WEB运维技术中,只能承担一半的角色. 想像一下,如何LVS本身倒了,肿么办?后端的NGINX再多,也只能是干着急,请求过来不呀! 所以,在本篇时,我们来实现LVS永不倒, ...
- [转] 跨域资源共享 CORS 详解
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...
- Mafly.Mail实现发送邮件
安装 打开程序包管理器控制台,执行命令:Install-Package Mafly.MailInstall-Package Newtonsoft.Json.dll 安装之后,项目会自动创建一个Conf ...
- python之工作目录和文件引用
1.参考 如何获得Python脚本所在目录的位置 Python 相对导入与绝对导入 还没细看 2.不考虑exe打包 sys.path[0] #顶层运行脚本的绝对目录 os.path.split(os. ...
- linux的文件打包与压缩
简介 Linux 上常用的压缩/解压工具,介绍了zip.rar.tar的使用. 文件打包和压缩 Linux 上的压缩包文件格式,除了 Windows 最常见的*.zip.*.rar..7z 后缀的压缩 ...
- ZOJ 3795 Grouping (强连通缩点+DP最长路)
<题目链接> 题目大意: n个人,m条关系,每条关系a >= b,说明a,b之间是可比较的,如果还有b >= c,则说明b,c之间,a,c之间都是可以比较的.问至少需要多少个集 ...