JQuery ajaxupload upload Image code _jquery

The use of Ajaxupload as upload client brushless upload Plug-ins, the latest version of 3.9, official address: http://valums.com/ajax-upload/

Introducing Jquery.min.1.4.2.js and Ajaxupload.js to the page

<script src= "Scripts/jquery-1.4.2.min.js" type= "Text/javascript" ></script>
<script src= " Scripts/ajaxupload3.9.js "type=" Text/javascript "></script>

HTML Code:

<style type= "Text/css" >
#txtFileName {
width:300px;
}
. Btnsubmit{border-bottom: #cc4f00 1px solid border-left: #ff9000 1px solid;border-top: #ff9000 1px solid; Border-right: #c c4f00 1px solid;text-align:center; PADDING:2PX 10px; line-height:16px; Background: #e36b0f; height:24px; Color: #fff; font-size:12px; Cursor:pointer;}
</style>
upload Picture: <input type= "text" id= "Txtfilename"/><div id= "Btnup" style= "width:300px"; "class= Btnsubmit > Browse </div>
<div id= "Imglist" ></div>

JS Code:

<script type= "Text/javascript" > $ (function () {var button = $ (' #btnUp '), interval; new Ajaxupload (Button, {//acti On: ' upload-test.php ', file Upload server-side Execution address action: '/handler/ajaxuploadhandler.ashx ', Name: ' MyFile ', onsubmit:function ( File, ext) {if (!) ( Ext &&/^ (jpg|jpeg| Jpg| JPEG) $/.test (EXT)) {alert (' picture format is incorrect, select JPG file! ', ' system hint '); return false;}//Change button text, when user selects fi
Le Button.text (' uploaded in ');
If you are want to allow uploading only 1 file in time,//Can disable upload button this.disable (); Uploding-> uploading. -> uploading ... interval = window.setinterval (function () {var text = Button.text (); if (Text.length <) {button
. text (text + ' | ');
else {button.text (' uploaded ');}}, 200; }, Oncomplete:function (file, response) {//file local file name, response server-side message button.text (' Upload image (only allow images in JPG format, size must not be greater than 150K)
');
Window.clearinterval (interval);
Enable upload button this.enable (); var k = response.replace ("<PRE>", ""). Replace ("&LT;/PRE> "," "); if (k = = '-1 ') {alert (' The file you uploaded is too big! Please do not exceed 150K ');} else {alert ("server-side returned string:" +k); alert ("Local file name:" +file); $ ("#txtFileName"). VA
L (k);
$ ("

server-side ajaxuploadhandler.ashx code

public void ProcessRequest (HttpContext context) {context.
Response.ContentType = "Text/plain"; Httppostedfile PostedFile = context.
Request.files[0];
String Savepath = "/upload/images/";
int filelength = Postedfile.contentlength; int fileSize = 163600; 150K string fileName = "-1";  Returns the uploaded filename if (filelength <= fileSize) {byte[] buffer = new Byte[filelength]; postedFile.InputStream.Read (buffer, 0,
Filelength);
FileName = uploadimage (buffer, savepath, "JPG"); } context.
Response.Write (FileName);  public static string Uploadimage (byte[] imgbuffer, String uploadpath, String ext) {try {System.IO.MemoryStream m = new
MemoryStream (Imgbuffer); if (! Directory.Exists (HttpContext.Current.Server.MapPath (Uploadpath)) Directory.CreateDirectory (
HttpContext.Current.Server.MapPath (Uploadpath));
String imgname = Createidcode () + "." + ext;
String _path = HttpContext.Current.Server.MapPath (uploadpath) + imgname;
Image img = image.fromstream (m); if (ext = = "JPG") img. Save (_path, SYSTEM.DRAWING.IMaging.
IMAGEFORMAT.JPEG); else img.
Save (_path, System.Drawing.Imaging.ImageFormat.Gif);
M.close ();
return Uploadpath + imgname; catch (Exception ex) {return ex.
message;
} public static string Createidcode () {DateTime Time1 = DateTime.Now.ToUniversalTime ();
DateTime Time2 = Convert.todatetime ("1970-01-01"); TimeSpan span = time1-time2; Span is the difference between two dates string t = span.
Totalmilliseconds.tostring ("0");
return t; }

PHP website development, file Upload function is often used, before I have described how to use PHP to achieve file upload function. With the development of Web technology, the user experience has become the key to measuring the success of the site, and today we share with you how to use jquery in PHP to implement Ajax way File Upload function example, which uses the jquery plug-in ajaxupload, It can achieve a single file and multiple file upload function.

Ajaxupload

jquery plug-in Ajaxupload implementation of the file upload function without creating form forms, you can achieve Ajax file upload, of course, if necessary can also create form forms.

Preparatory work

1, download jquery development kits and file upload plugin ajaxupload.

2, create uploadfile.html, and introduce jquery development kits and Ajaxupload Plug-ins

<script src= "Js/jquery-1.3.js" ></script>

3, according to the jquery plug-in ajaxupload needs, create a trigger Ajax file upload function div

<ul> 
<li id= "Example" > 
<div id= "Upload_button" > File upload </div>
<p> List of uploaded files: </p> 
<ol class= "Files" ></ol>

Note: From the following code we can see the jquery plugin Ajaxupload is based on Upload_button this div triggers the file upload function.

Front desk JS Code

In the code I set the switch, according to the need to match the upload file type, but also can be set to Ajax way to achieve a single file upload or multiple file upload.

 $ (document). Ready (function () {var button = $ (' #upload_button '), interval; var fileType = "All", 
FileNum = "one";
New Ajaxupload (button,{action: ' do/uploadfile.php ',/*data:{' buttoninfo ': Button.text ()},*/name: ' UserFile ', Onsubmit:function (file, ext) {if (FileType = = "Pic") {if (ext &&/^ (jpg|png|jpeg|gif) $/.test (ext)) {This.setdata
({' Info ': ' File type is picture '}); 
else {$ (' <li></li> '). Appendto (' #example. Files '). Text (' Non-picture type file, please retransmit ');
} button.text (' File Crosses ');
if (FileNum = = ' One ') this.disable (); 
Interval = Window.setinterval (function () {var text = Button.text (); if (Text.length <) {Button.text (text + '. '); 
else {button.text (' file Crosses ');
}, 200);
}, Oncomplete:function (file, response) {if (Response!= "success") alert (response); Button.text (' Files upload ');
Window.clearinterval (interval);
This.enable ();
if (response = = "Success"); 
$ (' <li></li> '). Appendto (' #example. Files '). text (file);
}
}); }); 

Comments:

Line 1th: $ (document). The Ready () function, a function in jquery, similar to window.load, uses this function to call the bound function immediately when the DOM load is ready to be read and manipulated.

Line 3rd: filetype and FileNum parameters represent the type and number of uploaded files, the default value is to upload all types of files, the same time can only upload a file, such as upload a picture file or upload multiple files simultaneously, you can change the value of these two variables to pic and more.

Line 6th to 8th: Post to the server data, you can set the static value can also use jquery DOM operation function to get some dynamic values, such as the form of the input value and so on.

Line 9th: equivalent to Front

Server-side $_files[' UserFile ']

Line 10th to 36th: The function that triggers before the file is uploaded.

Line 11th to 21st: The filtering function of the image file type, the Jquery SetData function is used to set the value to post to the server side.

Line 25th to 26th: Set up to upload only one file or multiple files, if only upload a file, the trigger button will be banned. If you want to transfer more than a few files, please set the MAXSIZE value in the server-side PHP file upload program, and of course the size limit of the upload file is also related to the settings in the php.ini file.

Line 28th to 35th: Dynamically update the text of the button every 200 milliseconds during the file upload, and the effect of the dynamic hint has been implemented. The Window.setinterval function is used to perform a built-in function at a specified time, and the interaction time Unit is Hao second.

Line 37th to 49th: File Upload function is triggered after the function, according to the return value if the server side of the error, then the front end of the alert way to prompt information.

Server-side php file upload code

In general, according to the introduction of the PHP file Upload function code example tutorial adaptation, involving the file upload size settings, error messages and other instructions have been described in detail in this article.

$upload _dir = '.. /file/';
$file _path = $upload _dir. $_files[' UserFile ' [' name '];
$MAX _size = 20000000;
echo $_post[' Buttoninfo '];
if (!is_dir ($upload _dir))
{
if (!mkdir ($upload _dir))
echo "File upload directory does not exist and cannot create file upload directory";
if (!chmod ($upload _dir,0755))
echo "File upload directory permissions cannot be set to read-writable";
}
if ($_files[' userfile '] [size ']> $MAX _size)
echo "Uploads the file size beyond the specified size";
if ($_files[' userfile '] [' size '] = = 0)
echo "Please select the uploaded file";
if (!move_uploaded_file ($_files[' userfile '] [' tmp_name '], $file _path))
echo "Failed to copy the file, please upload it again"; 
Switch ($_files[' userfile '] [' ERROR '])
{case
0:
echo "Success";
break;
Case 1:
echo "uploads a file that exceeds the value of the Upload_max_filesize option limit in php.ini";
break;
Case 2:
echo "The size of the upload file exceeds the value specified by the Max_file_size option in the HTML form";
break;
Case 3:
echo "file is only partially uploaded";
break;
Case 4:
echo "no file uploaded";
break;

Summarize

Basically front-end Ajax file upload trigger function and server-side PHP file upload function of the prototype is finished, you can according to their own needs of the front and back-end code to supplement, you can also separate some functions, such as file type, a single file or multiple file upload function. In general, the jquery plug-in ajaxupload implementation of File Upload function is relatively easy to use.