jquery 批量上传图片实现代码

老兵难忘

老兵难忘

2016-02-19 13:55

下面这个jquery 批量上传图片实现代码教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!
前台: upload.htm

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
!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"
titleupload/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

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
%@ 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

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
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;}
展开更多 50%)
分享

猜你喜欢

jquery 批量上传图片实现代码

Web开发
jquery 批量上传图片实现代码

JQuery+ajax实现批量上传图片(自写)

Web开发
JQuery+ajax实现批量上传图片(自写)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery 分页控件实现代码

Web开发
jquery 分页控件实现代码

jQuery 浮动广告实现代码

Web开发
jQuery 浮动广告实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery 弹出层实现代码

Web开发
jquery 弹出层实现代码

jQuery 页面 Mask实现代码

Web开发
jQuery 页面 Mask实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jQuery 使用手册(一)

jQuery 使用手册(一)

Oracle数据库重复数据删除的三种情况

Oracle数据库重复数据删除的三种情况
下拉加载更多内容 ↓