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通用函数
May 09 Javascript
url 特殊字符 传递参数解决方法
Jan 01 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
对node.js中render和send的用法详解
May 14 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
php随机抽奖实例分析
2015/03/04 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
详谈js模块化规范
2017/07/07 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python学生信息管理系统(初级版)
2018/10/17 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
什么是URL
2015/12/13 面试题
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS