» » PHP + jQuery + Ajax multiple image upload example

 

PHP + jQuery + Ajax multiple image upload example

Author: bamboo06 on 11-11-2014, 02:03, views: 17876

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.

Category: PHP Scripts / Javascript

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
26 October 2017 22:23

anderson

Reply
  • Group: Guests
  • –†Registered date: --
  • Status:
 
I have been searching for PHP + jQuery + Ajax multiple image upload example for rushmypapers.Thank God I got to know about this article.Now will mention about this example in detail.

<
  • 0 Comments
  • 0 Articles
27 February 2018 14:10

tge

Reply
  • Group: Guests
  • –†Registered date: --
  • Status:
 
Date window at replica rolex 3 o'clock, Tudor logo engraved at 12 o'clock. Rose fake rolex gold neutralized the low-key black, but not too replica watches uk much publicity, suitable for people who like swiss replica watches low-key wear.

Information
Comment on the news site is possible only within (days) days from the date of publication.