PHP jQuery Ajax implements multiple image upload effects_jquery

What I will share with you today is to use PHP jQuery Ajax to achieve the effect of PHP jQuery Ajax implements multiple image upload effects_jquery multiple images without refreshing the page. The user only needs to click to select the image to upload, and then the image is automatically uploaded to the server and displayed on the page.

HTML

We place a form on the page and use post to submit it to the background php handler upload.php. Note that the enctype attribute setting must support file upload. #preview is used to display the image after PHP jQuery Ajax implements multiple image upload effects_jquery. There is no explanation in this article about css style setting. Please refer to the source code of the download package.

Copy code The code is as follows:

                                                                                                                                                                                                                                                             Add Image
          

Maximum 100KB, supports jpg, gif, and png formats.

jQuery
This example is based on jQuery, so the jquery library and jquery.wallform.js must be loaded into the page.

Copy code The code is as follows:

When the button "Add Image" is clicked, a file selection dialog box pops up. After selecting the image to be uploaded, the change event is triggered. Then the form #imageform calls the ajaxForm() method of jquery.wallform.js, submits the form data to the background PHP for processing, and processes the display of page elements based on the returned results. If the upload is successful, the images will be displayed on the page one by one. Regarding the use of ajaxForm(), you can refer to the article on this site: Ajax form submission plug-in jqery form.

Copy code The code is as follows:

$(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 processes image uploads and saves uploaded images in the uploads/ directory. Note that the directory must have write permissions. First, you need to check whether it is submitted in POST mode, then determine whether the image format and image size meet the requirements, then use move_uploaded_file() to upload the image, and rename the image in the format: time().rand(100,999).

Copy code The code is as follows:

$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 the image to upload';
exit;
}
$ext = extend($name);
If(!in_array($ext,$extArr)){
echo 'The picture format is wrong! ';
exit;
}
If($size>(100*1024)){
echo 'The image size cannot exceed 100KB';
exit;
}
$image_name = time().rand(100,999).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
If(move_uploaded_file($tmp, $path.$image_name)){
echo '';
}else{
echo 'Upload error! ';
}
exit;
}
//Get file type suffix
function extend($file_name){
$extend = pathinfo($file_name);
$extend = strtolower($extend["extension"]);
Return $extend;
}

Of course, in actual applications, it can be combined with the database and user center to save the images uploaded by users in the data table. You can study the specific applications by yourself.

The above is all the content shared with you in this article, I hope you will like it.