GOOCODE - Find your code/scripts

2 Today I have to share is not refreshing the page under the premise of using PHP + jQuery + Ajax multi-picture upload results. Users only need to click to select the picture you want to upload, and then the picture is automatically uploaded to the server and displayed on the page.

In this paper we use an Ajax form submission plugin: jqery.form.js, have an expert to modify a few lines of code and renamed: jquery.wallform.js, directly used.
HTML
We place a form form on the page, using the post to submit to a background php handler upload.php, attention enctype attribute is set to support the file upload. #preview to display After uploading pictures.

 
<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
	<div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div>
		<div id="up_btn" class="btn">
			<span>Add IMG</span>
			<input id="photoimg" type="file" name="photoimg">
		</div>
</form>
 <p>Max size 100KB, supporting jpg, gif, png type.</p>
<div id="preview"></div>

jQuery
This example is based on jQuery, it is necessary to load jquery libraries and jquery.wallform.js page.

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.wallform.js"></script> 

When you click the button "Add image" pop-up dialog box, select the file, select the picture you want to upload, the trigger change events. Then form #imageform call jquery.wallform.js of ajaxForm () method, the form data will be submitted to the PHP backend processing and returns the results based on the processing elements on the page display. If the upload is successful, the pictures will be arranged to display a picture on the page. About ajaxForm () can be used in reference to the site of the article: Ajax form submission plugin jquery form.

$(function(){ 
    $('#photoimg').die('click').live('change', function(){ 
        var status = $("#up_status"); 
        var btn = $("#up_btn"); 
        $("#imageform").ajaxForm({ 
            target: '#preview',  
            beforeSubmit:function(){ 
                status.show(); 
                btn.hide(); 
            },  
            success:function(){ 
                status.hide(); 
                btn.show(); 
            },  
            error:function(){ 
                status.hide(); 
                btn.show(); 
        } }).submit(); 
    }); 
}); 

PHP
upload.php processing image upload and save upload good pictures in uploads / directory, note the directory must have write permissions. First need to detect whether to submit to POST mode, and then determine image format, image size meets the requirements, then use move_uploaded_file () to upload pictures and rename picture format:. Time () rand (100,999).

$path = "uploads/"; 
 
$extArr = array("jpg", "png", "gif"); 
 
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){ 
    $name = $_FILES['photoimg']['name']; 
    $size = $_FILES['photoimg']['size']; 
     
    if(empty($name)){ 
        echo 'Please select your uploading img!'; 
        exit; 
    } 
    $ext = extend($name); 
    if(!in_array($ext,$extArr)){ 
        echo 'Img type error!'; 
        exit; 
    } 
    if($size>(100*1024)){ 
        echo 'Image size over 100KB'; 
        exit; 
    } 
    $image_name = time().rand(100,999).".".$ext; 
    $tmp = $_FILES['photoimg']['tmp_name']; 
    if(move_uploaded_file($tmp, $path.$image_name)){ 
        echo '<img src="'.$path.$image_name.'"  class="preview">'; 
    }else{ 
        echo 'Uploading error.'; 
    } 
    exit; 
} 
 
//Get file type suffix 
function extend($file_name){ 
    $extend = pathinfo($file_name); 
    $extend = strtolower($extend["extension"]); 
    return $extend; 
} 

Of course, the practical applications, databases, and can be combined with user-centered, user-uploaded the pictures stored in the data table, you can own study of the specific application.