How to upload pictures by Ajax

This article mainly shows you "Ajax how to upload pictures", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to upload pictures in Ajax" this article.

1. Upload the picture to the server.

two。 The background will send the picture address to the html page and show it in the form of a picture.

3. Add the picture address to the input form the day after tomorrow, and the form is hidden.

4. The front end deletes the picture, and removes the picture and form data through the js operation.

5. The picture upload form is separate. Cannot be nested in the overall form.

6. Great picture upload, you can deal with the picture. Compress, add watermark, etc.

7. Click btn, trigger the picture click, after the picture changes, trigger the picture form submission.

Click the button

The picture outside the station is uploaded. (2)] add a picture

Upload form

Trigger event

("# up_btn") .click (function () {$("# carousel-photoimg"). Click ();}); $('# carousel-photoimg'). On ('change', function () {var status = $("# up_status"); var btn = $("# up_btn"); $("# imageform") .ajaxForm ({target:' # carousel-preview', beforeSubmit:function () {/ / display status.show () with the loaded picture before submission After btn.hide ();}, success:function () {/ / submit, the loaded image shows status.hide (); btn.show ();}, error:function () {status.hide (); btn.show ();}}) .submit ();})

Back-end verification and processing

Function carouselUpload () {$path = "Uploads/Store/goods/" .date ("Ymd"). /'; if (! file_exists ($path)) {mkdir ($path, 0777, true);} $extArr = array ("jpg", "png", "gif", "jpeg"); if (isset ($_ POST) and $_ SERVER ['REQUEST_METHOD'] = "POST") {$name = $_ FILES [' photoimg'] ['name']; $size = $FILES [' photoimg'] ['size'] If (empty ($name)) {echo 'Please select a picture to upload'; exit;} $ext = $this- > extend ($name); if (! in_array ($ext,$extArr)) {echo 'picture format error!' ; exit;} if ($size > (2000mm 1024)) {echo 'picture size cannot exceed 2m rand exit;} $image_name = time (). Rand (100999). ". $ext;$tmp = $_ FILES [' photoimg'] ['tmp_name']; if (move_uploaded_file ($tmp, $path.$image_name)) {echo'