Home > Developer > PHP

Php+ajax implementation file No refresh upload file code

Source: Internet
Author: User
Tags foreach file upload html tags php file urlencode
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

PHP + jQuery Ajax File upload instance. Because see some friends ask how to implement the PHP environment of the Web page upload function, oneself these days just used the jquery_upload_multiple upload plug-ins, so here to use for everyone to say.

To achieve this plug-in based on the upload function, in fact quite simple, need jquery on the line, there is also a upload file when the PHP program, crap not to say, first look at the following HTML, that is, with the upload form, let users choose to upload the file page:

The code is as follows Copy Code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>easy Ajax FormData Upload multiple images</title>
<script type= "Text/javascript" src= "/ajaxjs/jquery-1.6.2.min.js" ></script><!-- Here you can refer to your actual path of the jquery plugin-->
<body>
<style>
#feedback {width:1200px;margin:0 Auto;}
#feedback img{float:left;width:300px;height:300px;}
#ZjmainstaySignaturePicture, #addpicContainer {float:left;width:100%;}
#addpicContainer {margin-left:5px;}
#ZjmainstaySignaturePicture img{width:535px;}
#addpicContainer Img{float:left;}
. Loading{display:none;background:url ("Yun_qi_img/ui-anim_basic_16x16.gif") no-repeat scroll 0 0 transparent;float: left;padding:8px;margin:18px 0 0 18px;}
</style>
<div id= "Addpiccontainer" >
<!--uses multiple= "multiple" attribute to realize adding multiple graphs-->
<!--position:absolute;left:10px;top:5px; only for this use case the input is hidden under the picture. -->
<!--Height:0;width:0;z-index:-1; is to hide input, because Chrome cannot use Display:none, otherwise cannot add file-->
<!--onclick= "getElementById (' Inputfile '). Click the Add File button when clicking the picture-->

<input type= "File" multiple= "multiple" id= "Inputfile" style= "Height:0;width:0;z-index:-1; position:absolute;left:10px;top:5px; " />
<span class= "Loading" ></span>
</div>
<div id= "Feedback" ></div><!--response Returns a data container-->
<script type= "Text/javascript" >
$ (document). Ready (function () {
Response File Add Success Event
$ ("#inputfile"). Change (function () {
Creating Formdata Objects
var data = new FormData ();
Adding data to a Formdata object
$.each ($ (' #inputfile ') [0].files, function (i, file) {
Data.append (' upload_file ' +i, file);
});
$ (". Loading"). Show (); Show Load Picture
Send data
$.ajax ({
URL: ' submit_form_process.php ',
Type: ' POST ',
Data:data,
Cache:false,
Contenttype:false,//indispensable parameters
Processdata:false,//indispensable parameters
Success:function (data) {
Data = $ (data). HTML ();
The first feedback data is directly append, and the rest is before 1th (. EQ (0). before ()) to the front.
Data.replace (/&lt;/g, ' < '). Replace (/&gt;/g, ' > ') to convert HTML tags, otherwise the picture cannot be displayed.
if ($ ("#feedback"). Children (' img '). length = = 0) $ ("#feedback"). Append (Data.replace (/&lt;/g, ' < '). Replace (/ &gt;/g, ' > '));
else $ ("#feedback"). Children (' img '). EQ (0). Before (Data.replace (/&lt;/g, ' < '). Replace (/&gt;/g, ' > '));
$ (". Loading"). Hide (); Load successfully removed load picture
},
Error:function () {
Alert (' upload error ');
$ (". Loading"). Hide (); Load failed remove load picture
}
});
});
});
</script>
</body>

Next is the upload picture of the php file code: File name: submit_form_process.php

The code is as follows Copy Code

<?php
Header (' content-type:text/html charset:utf-8 ');
$dir _base = "./files/"; File Upload root directory
No successful upload file, error and exit.
if (empty ($_files)) {
echo "<textarea></textarea>";
Exit (0);
}
$output = "<textarea>";
$index = 0; $_files the file name as an array subscript, foreach ($_files as $index => $file) is not applicable
foreach ($_files as $file) {
$upload _file_name = ' upload_file '. $index//corresponds to the file name in the index.html fomdata
$filename = $_files[$upload _file_name][' name ');
$GB _filename = iconv (' utf-8 ', ' gb2312 ', $filename); Name converted into gb2312 processing
File does not exist before uploading
if (!file_exists ($dir _base. $GB _filename)) {
$isMoved = false; Default upload Failed
$MAXIMUM _filesize = 1 * 1024 * 1024; File size Limit 1M = 1 * 1024 * 1024 B;
$rEFileTypes = "/^\. (jpg|jpeg|gif|png) {1}$/i";
if ($_files[$upload _file_name][' size '] <= $MAXIMUM _filesize &&
Preg_match ($rEFileTypes, STRRCHR ($GB _filename, '. ')) {
$isMoved = @move_uploaded_file ($_files[$upload _file_name][' tmp_name '), $dir _base. $GB _filename); Uploading files
}
}else{
$isMoved = true;//Existing file is set to upload success
}
if ($isMoved) {
Output picture Files tags
Note: In some system src may need urlencode processing, found that the picture can not be displayed,
Please try UrlEncode ($GB _filename) or UrlEncode ($filename), please see the src shown in HTML and resolve as appropriate.
$output. = " ';
}else {
$output. = "}
$index + +;
}
echo $output. " </textarea> ";

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
ajax multiple file upload php php ajax file upload script file upload code in php php file upload code download php ajax file upload without submit multiple file upload in php using ajax php ajax file upload progress bar
Related Article
Relive the bubble sort of PHP

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More