jquery 批量上传图片实现代码


Posted in Javascript onJanuary 28, 2010

前台: upload.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>upload</title> 
<link href="upload.css" rel="Stylesheet" /> 
</head> 
<body> 
<form> 
<ul> 
<li> 
<button id="SubUpload" onclick="TSubmitUploadImageFile();return false;"> 
确定上传</button>   
<button id="CancelUpload" class="ManagerButton" onclick="javascript:history.go(-1);"> 
取消</button>   
<button id="AddUpload" class="ManagerButton" onclick="TAddFileUpload();return false;"> 
增加</button> 
</li> 
</ul> 
<ul id="loadimage"> 
<li> 
<div class="imagelabel"> 
图片1:</div> 
<div class="imagepath"> 
<input name="" size="45" id="uploadImg1" type="file" /></div> 
<div class="loadinfo"> 
<span id="uploadImgState1"></span> 
</div> 
</li> 
</ul> 
</form> 
</body> 
</html> 
<script type="text/javascript" src="http://www.cnblogs.com/JS/jquery-1.3.2-vsdoc.js"></script> 
<script type="text/javascript"> 
var TfileUploadNum = 1; //记录图片选择框个数 
var Tnum = 1; //ajax上传图片时索引 
//增加上传按钮 
function TAddFileUpload() { 
var idnum = TfileUploadNum + 1; 
var str = "<li>"; 
str += "<div class='imagelabel'>图片" + idnum + ":</div>"; 
str += "<div class='imagepath'><input name='' size='45' id='uploadImg" + idnum + "' type='file' /></div>"; 
str += "<div class='loadinfo'><span id='uploadImgState" + idnum + "'></span></div>"; 
str += "</li>"; 
$("#loadimage").append(str); 
TfileUploadNum += 1; 
} 
//开始上传 
function TSubmitUploadImageFile() { 
document.getElementById("SubUpload").disabled = true; 
document.getElementById("CancelUpload").disabled = true; 
document.getElementById("AddUpload").disabled = true; 
setTimeout("TajaxFileUpload()", 1000); //此为关键代码 
} 
//Ajax上传方法 
function TajaxFileUpload() { 
if (Tnum < TfileUploadNum + 1) { 
//准备提交处理 
$("#uploadImgState" + Tnum).html("<img src='/gif/upfileloader.gif'/>"); 
//开始提交 
$.ajax({ 
type: "POST", 
url: "Handler.ashx", 
data: { upfile: $("#uploadImg" + Tnum).val()}, 
success: function(data, status) { 
var stringArray = data.split("|"); 
//stringArray[0]  成功状态(1为成功,0为失败) 
//stringArray[1]
  上传成功的文件名 
//stringArray[2]
  消息提示 
if (stringArray[0] == "1") { 
//上传成功 
$("#uploadImgState" + Tnum).html("<img src='/gif/Success.gif' />" + stringArray[1] + "--" + stringArray[2]); 
} 
else { 
//上传出错 
$("#uploadImgState" + Tnum).html("<img src='/gif/Error.gif' />" + stringArray[1] + "--" + stringArray[2]); 
} 
Tnum++; 
setTimeout("TajaxFileUpload()", 1000); 
} 
}); 
} 
else { 
document.getElementById("SubUpload").disabled = false; 
document.getElementById("CancelUpload").disabled = false; 
document.getElementById("AddUpload").disabled = false; 
} 
}



 
</script>

处理程序Handler.ashx
<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.IO; 
using System.Text; 
using System.Net; 
public class Handler : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
//源图片路径 
string _fileNamePath = ""; 
try 
{ 
_fileNamePath = context.Request.Form["upfile"]; 
string _savedFileResult = UpLoadFile(_fileNamePath); //开始上传 
context.Response.Write(_savedFileResult);//返回上传结果 
} 
catch 
{ 
context.Response.Write("0|error|文件路径错误"); 
} 
} 
/// <summary> 
/// 保存图片 
/// </summary> 
/// <param name="fileNamePath"></param> 
/// <returns></returns> 
private string UpLoadFile(string fileNamePath) 
{ 
//图片格式 
string fileNameExt = fileNamePath.Substring(fileNamePath.IndexOf('.')).ToLower(); 
if (!CheckFileExt(fileNameExt)) return "0|error|图片格式不正确!"; 
//保存路径 
string toFilePath = "ProductUpload/"; 
//物理完整路径 
string toFileFullPath = HttpContext.Current.Server.MapPath(toFilePath); 
//检查是否有该路径 没有就创建 
if (!Directory.Exists(toFileFullPath)) 
{ 
Directory.CreateDirectory(toFileFullPath); 
} 
//生成将要保存的随机文件名 
string toFileName = GetFileName(); 
//将要保存的完整路径 
string saveFile=toFileFullPath +toFileName + fileNameExt; 
///创建WebClient实例 
WebClient myWebClient = new WebClient(); 
//设定windows网络安全认证 
myWebClient.Credentials = CredentialCache.DefaultCredentials; 
//要上传的文件 
FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read); 
  
BinaryReader r = new BinaryReader(fs); 
//使用UploadFile方法可以用下面的格式 
myWebClient.UploadFile(saveFile,fileNamePath); 
return "1|"+toFileName+fileNameExt+"|保存成功."; 
} 
/// <summary> 
/// 检测图片类型 
/// </summary> 
/// <param name="_fileExt"></param> 
/// <returns>正确返回True</returns> 
private bool CheckFileExt(string _fileExt) 
{ 
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" }; 
for (int i = 0; i < allowExt.Length; i++) 
{ 
if (allowExt[i] == _fileExt) { return true; } 
} 
return false; 
} 
/// <summary> 
/// 得到随机图片名 
/// </summary> 
/// <returns></returns> 
public static string GetFileName() 
{ 
Random rd = new Random(); 
StringBuilder serial = new StringBuilder(); 
serial.Append(DateTime.Now.ToString("yyMMddHHmmssff")); 
serial.Append(rd.Next(0, 9999).ToString()); 
return serial.ToString(); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}

CSS样式 upload.css
body{font-size: 12pt;} 
ul{list-style: none;} 
li{margin: 0px;} 
#loadimage{width: 860px;overflow: hidden;} 
.imagelabel{ float: left; width: 60px; height: 25px;} 
.imagepath{float: left; width: 400px; height: 25px; } 
.loadinfo{float: left; width: 400px;height: 25px;}
Javascript 相关文章推荐
js如何取消事件冒泡
Sep 23 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 Javascript
Jquery 常用方法经典总结
Jan 28 #Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 #Javascript
JavaScript 学习笔记(十五)
Jan 28 #Javascript
Extjs 几个方法的讨论
Jan 28 #Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 #Javascript
图像替换新技术 状态域方法
Jan 28 #Javascript
javascript innerText和innerHtml应用
Jan 28 #Javascript
You might like
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
php中关于换行的实例写法
2019/09/26 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python 调用HBase的简单实例
2016/12/18 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
python 实现视频 图像帧提取
2019/12/10 Python
python中如何使用insert函数
2020/01/09 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
python pip如何手动安装二进制包
2020/09/30 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
大学毕业感言
2014/01/10 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
走进敬老院活动总结
2014/07/10 职场文书
自我管理的活动方案
2014/08/25 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏