Front Desk: upload.htm
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>upload</title>
<link href= "Upload.css" rel= "Stylesheet"/>
<body>
<form>
<ul>
<li>
<button id= "Subupload" onclick= "Tsubmituploadimagefile (); return false;" >
Confirm Upload </button>
<button id= "Cancelupload" class= "Managerbutton" onclick= "Javascript:history.go" (-1); " >
Cancel </button>
<button id= "Addupload" class= "Managerbutton" onclick= "Taddfileupload" (); return false; " >
Increase </button>
</li>
</ul>
<ul id= "LoadImage" >
<li>
<div class= "Imagelabel" >
Picture 1:</div>
<div class= "ImagePath" >
<input name= "" "Size=" id= "UPLOADIMG1" type= "file"/></div>
<div class= "Loadinfo" >
<span id= "UploadImgState1" ></span>
</div>
</li>
</ul>
</form>
</body>
<script type= "Text/javascript" src= "Http://www.cnblogs.com/JS/jquery-1.3.2-vsdoc.js" ></script>
<script type= "Text/javascript" >
var tfileuploadnum = 1; Record Picture selection box number
var tnum = 1; Ajax Upload Image Index
Add Upload button
function Taddfileupload () {
var idnum = tfileuploadnum + 1;
var str = "<li>";
STR + + "<div class= ' Imagelabel ' > picture" + idnum + ":</div>";
str = "<div class= ' ImagePath ' ><input name= ' size= ' id= ' uploadimg '" + idnum + "' type= ' file '/></div> ";
STR + + "<div class= ' loadinfo ' ><span id= ' uploadimgstate" + idnum + "' ></span></div>";
STR + + "</li>";
$ ("#loadimage"). Append (str);
Tfileuploadnum + 1;
}
Start uploading
function Tsubmituploadimagefile () {
document.getElementById ("Subupload"). Disabled = true;
document.getElementById ("Cancelupload"). Disabled = true;
document.getElementById ("Addupload"). Disabled = true;
SetTimeout ("Tajaxfileupload ()", 1000); This is the key code
}
Ajax Upload Method
function Tajaxfileupload () {
if (Tnum < Tfileuploadnum + 1) {
Prepare for submission Processing
$ ("#uploadImgState" + tnum). HTML ("Start submitting
$.ajax ({
Type: "POST",
URL: "Handler.ashx",
Data: {upfile: $ ("#uploadImg" + Tnum). Val ()},
Success:function (data, status) {
var Stringarray = data.split ("|");
Stringarray[0] Success Status (1 for success, 0 for failure)
STRINGARRAY[1] Upload a successful filename
STRINGARRAY[2] message Prompts
if (stringarray[0] = = "1") {
Upload successful
$ ("#uploadImgState" + tnum). HTML ("}
else {
Upload Error
$ ("#uploadImgState" + tnum). HTML ("}
tnum++;
SetTimeout ("Tajaxfileupload ()", 1000);
}
});
}
else {
document.getElementById ("Subupload"). Disabled = false;
document.getElementById ("Cancelupload"). Disabled = false;
document.getElementById ("Addupload"). Disabled = false;
}
}
</script>
Handler Handler.ashx
Copy Code code as follows:
<%@ 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)
{
SOURCE Picture Path
String _filenamepath = "";
Try
{
_filenamepath = context. request.form["Upfile"];
String _savedfileresult = UploadFile (_filenamepath); Start uploading
Context. Response.Write (_savedfileresult)//return upload results
}
Catch
{
Context. Response.Write ("0|error| File path error");
}
}
<summary>
Save picture
</summary>
<param name= "Filenamepath" ></param>
<returns></returns>
private String UploadFile (String filenamepath)
{
Picture format
String filenameext = filenamepath.substring (Filenamepath.indexof ('. ')). ToLower ();
if (! Checkfileext (Filenameext)) return "0|error| picture format is not correct!";
Save path
String Tofilepath = "productupload/";
Physical full path
String tofilefullpath = HttpContext.Current.Server.MapPath (Tofilepath);
Check to see if the path is not created
if (! Directory.Exists (Tofilefullpath))
{
Directory.CreateDirectory (Tofilefullpath);
}
Generate the random file name to be saved
String tofilename = GetFileName ();
The full path that will be saved
String Savefile=tofilefullpath +tofilename + filenameext;
Create a WebClient instance
WebClient mywebclient = new WebClient ();
Set up Windows network security authentication
Mywebclient.credentials = CredentialCache.DefaultCredentials;
Files to upload
FileStream fs = new FileStream (Filenamepath, FileMode.Open, FileAccess.Read);
BinaryReader r = new BinaryReader (FS);
Use the UploadFile method to use the following format
Mywebclient.uploadfile (Savefile,filenamepath);
Return "1|" +tofilename+filenameext+ "| Save success."
}
<summary>
Detecting picture types
</summary>
<param name= "_fileext" ></param>
<returns> return true</returns> correctly
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>
Get a random picture name
</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 style upload.css
Copy Code code as follows:
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;}
