jquery php批量上传,jQuery_jquery 批量上传图片实现代码，前台: upload.htm 复制代码 代码 - phpStudy...

jquery 批量上传图片实现代码

前台: upload.htm

复制代码 代码如下:

upload

• 确定上传

  取消

  增加

• 图片1:

var TfileUploadNum = 1; //记录图片选择框个数

var Tnum = 1; //ajax上传图片时索引

//增加上传按钮

function TAddFileUpload() {

var idnum = TfileUploadNum + 1;

var str = "

";

str += "

图片" + idnum + ":

";

str += "

str += "

str += "

";

$("#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("");

//开始提交

$.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("" + stringArray[1] + "--" + stringArray[2]);

}

else {

//上传出错

$("#uploadImgState" + Tnum).html("" + stringArray[1] + "--" + stringArray[2]);

}

Tnum++;

setTimeout("TajaxFileUpload()", 1000);

}

});

}

else {

document.getElementById("SubUpload").disabled = false;

document.getElementById("CancelUpload").disabled = false;

document.getElementById("AddUpload").disabled = false;

}

}

处理程序Handler.ashx

复制代码 代码如下:

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|文件路径错误");

}

}

///

/// 保存图片

///

///

///

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+"|保存成功.";

}

///

/// 检测图片类型

///

///

/// 正确返回True

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;

}

///

/// 得到随机图片名

///

///

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;}相关阅读:

dmysql自己封装的mysql库

Vista安全技巧 DIY系统安全检测

发表文章时自动保存到剪贴板

jquery实现前一个和后一个效果

怎样彻底关闭Vista安全中心没完没了的提示？

将JSP在内存生成的图片显示到页面

SQL Server 2000的安全配置

SQL Server 2008：传递表值参数

CSS中Float(浮动)相关技巧文章

使用第一个真正的 Ajax 服务器

Webjx推荐5个改善CSS编码的幻灯片教程

FREEBSD软件安装

Service Unavailable问题

Discuz论坛的WAP功能在手机上使用感爱