JQuery ajax File Upload (PHP) _jquery

How to implement jquery Ajax file Upload, php truthfully file upload.
Ajax upload file, php upload file.

"PHP File Upload"

Before I begin, I think it is necessary to put the principle of the Web upload file to a simple point.
In fact, here, whether it is php,jsp, or ASP processing uploaded files, in fact, the web has already uploaded files to the server, we just use the upload processing function to deal with uploaded files.
and processing functions are generally used php,jsp,asp and other service-side language to achieve. So how do you upload files via the Web (HTTP protocol)? You need HTML code similar to the following:
Test.html

Copy Code code as follows:

<form action= "do_file_upload.php" method= "post" enctype= "Multipart/form-data" >
<p>pictures:
<input type= "file" name= "Picture"/>
<input type= "Submit" value= "Send"/>
</p>
</form>

Note: enctype= "Multipart/form-data" is required, it tells form table This is a file upload type, once the request is successful, the file is uploaded to the server's temporary folder,
As for the arrival of the destination, the document will be how to deal with it is php,jsp,asp.
(However, you should not be happy too soon, if the file has not been moved to another place and has not been renamed, the file will be deleted at the end of the form request.) So we're going to write a script to process the uploaded file.
Here we use PHP to deal with
do_file_upload.php

Copy Code code as follows:

<?php
$error = ""; Uploading file Error messages
$msg = "";
$fileElementName = ' picture ';
$allowType = Array (". jpg", ". gif", ". png"); File types allowed to upload
$num = Strrpos ($_files[' picture '] [' name '], '. ');
$fileSuffixName = substr ($_files[' picture '] [' name '], $num, 8);//This number is variable
$fileSuffixName = Strtolower ($fileSuffixName); Determine the type of upload file

$upFilePath = ' d:/'; Final storage Path

if (!empty ($_files[$fileElementName] [' ERROR '])
{
Switch ($_files[$fileElementName] [' ERROR ']]
{

Case ' 1 ':
$error = ' The file passed exceeds the value of the Upload_max_filesize option limit in php.ini ';
Break
Case ' 2 ':
$error = ' The size of the uploaded file exceeds the value specified by the Max_file_size option in the HTML form ';
Break
Case ' 3 ':
$error = ' file is only partially uploaded ';
Break
Case ' 4 ':
$error = ' no file uploaded ';
Break

Case ' 6 ':
$error = ' temporary folder not found ';
Break
Case ' 7 ':
$error = ' file write Failed ';
Break
Default
$error = ' Unknown error ';
}
}elseif (Empty ($_files[' filetoupload '] [' tmp_name ']) | | $_files[' filetoupload '] [' tmp_name '] = = ' None ')
{
$error = ' no upload file. '
}else if (!in_array ($fileSuffixName, $allowType))
{
$error = ' not allowed to upload file type ';
}else{
);
if ($ok = = FALSE) {
$error = ' upload failed ';
}
}
?>

Additional note: About $_files arrays

This array contains all uploaded file information, that is, the information about the uploaded file is recorded.
The contents of the $_files array in the example above are shown below. Let's assume the name of the file upload field, as shown in the previous example, is UserFile. Names can be named arbitrarily.

$_files[' UserFile ' [' Name ']
The original name of the client machine file.

$_files[' userfile ' [' type ']
The MIME type of the file, if the browser provides this information. One example is "Image/gif". However, this MIME type is not checked on the PHP side, so do not assume that this is the value.

$_files[' userfile ' [' Size ']
The size of the uploaded file in bytes.

$_files[' UserFile ' [' Tmp_name ']
The temporary file name stored on the server after the file is uploaded.

$_files[' userfile ' [' Error ']
The error code associated with the file upload. This item was added in the PHP 4.2.0 version.

"Ajax File Upload"

In fact, the implementation of no refresh file upload. Can be used in the IFrame file upload principle.
In fact, when uploading files in PHP ... Can only use $_files form, but if we are only a single JS way to take its ID, such as <input id= ' img ' type= ' file '. document.getElementById (' img '). Value or jquery $ ("#img") are not actually transmitted (but there are a lot of people doing it, and I was at first).
But the function also needs to realize so-called "asynchronous upload", How to do?? You can only use a third party component, or write one yourself (embed an IFRAME in a Web page). But if it's about development time, that's with a third party, here's a nice jquery Ajax file Upload component that is "ajaxfileupload.js" and its component download address is: http://www.phpletter.com/, Download complete with a PHP application demo, it is easy to read.
Process:
(1) The code for the file on the front end: test.php

Copy Code code as follows:

<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Ajaxfileupload.js" ></script>
<script type= "Text/javascript" >
function Ajaxfileupload ()
{
$.ajaxfileupload
(
{
URL: ' doajaxfileupload.php ',//You process the service side of the uploaded file
Secureuri:false,
Fileelementid: ' img ',
DataType: ' JSON ',
Success:function (data)
{
alert (data.file_infor);
}
}
)

return false;
}
</script>

The corresponding HTML is:

Copy Code code as follows:

<input id= "img" type= "file" size= "name=" "img" class= "Input" >
<button class= "button" id= "Buttonupload" onclick= "return Ajaxfileupload ();" >Upload</button>

So the client is done.

(2) server-side doajaxfileupload.php

Here you can save it for a simple test to see if the actual pass value comes in.
$file _infor = Var_export ($_files,true);
File_put_contents ("d:file_infor.php". $file _infor);
So you call the file_infor.php file you just generated, and you see the familiar information:

Copy Code code as follows:

Array
' Name ' => ' lamp.jpg ',
' Type ' => ' image/pjpeg ',
' Tmp_name ' => ' c:\windows\temp\phpFA.tmp ',
' Error ' =>0,
' Size ' =>3127
)

Of course, the real deal class is like this:

Copy Code code as follows:

<?php
$upFilePath = "d:/";
);
if ($ok = = FALSE) {
echo json_encode (' file_infor ' => ' upload failed ');
}else{
echo json_encode (' file_infor ' => ' uploaded success ');
}
?>

Note: In fact, you can embed an IFRAME in a page and then submit it using the native post form in the IFRAME. This is also the way to use this plug-in for jquery. But it's dynamically generated iframe and form

Original: http://fc-lamp.blog.163.com/blog/static/1745666872009519310153/