The essence of Ajax image uploading,

The essence of Ajax image uploading,

1. upload images to the server.

2. The image address is uploaded to the html page in the background and displayed as an image.

3. Add the image address to the input form the next day, and the form is hidden.

4. The front-end deletes the image and removes the image and form data through js operations.

5. The Image Upload form is separate. Cannot be nested in the total form.

6. You can process the uploaded images. Compression and watermarking.

7. Click btn to trigger the image click. After the image changes, the image form is submitted.

Click

<Div id = "up_status" style = "display: none"> [uploading out-of-site images ...... (2)] </div> <div id = "up_btn" class = "carousel-btn"> <span> Add an image </span> </div> <div id = "carousel-preview "> </div>

Upload form

<form id="imageform" class="hidden" method="post" enctype="multipart/form-data" action="{sh::U('Goods/carouselUpload')}"><input id="carousel-photoimg" type="file" name="photoimg"></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 () {// before submission, use the loaded image to display the status. show (); btn. hide () ;}, success: function () {// after submission, the loaded image Displays status. hide (); btn. show () ;}, error: function () {status. hide (); btn. show ();}}). submit ();});

Backend verification and Processing

Function compute uselupload () {$ 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 'select the image to upload '; exit;} $ ext = $ this-> extend ($ name); if (! In_array ($ ext, $ extArr) {echo 'image format error! '; Exit;} if ($ size> (2000*1024) {echo 'image size cannot exceed 2 MB'; exit;} $ image_name = time (). rand (100,999 ). ". ". $ ext; $ tmp = $ _ FILES ['photoimg '] ['tmp _ name']; if (move_uploaded_file ($ tmp, $ path. $ image_name) {echo '<div class = "carousel-container" onclick = "deleteImg (this);"> [uploading out-of-site images ...... (3)] <input name = "goodsimg []" value = "'. $ path. $ image_name.'" type = "hidden"> [uploading out-of-site images ...... (4)] </div> ';} An error occurred while uploading else {echo! ';} Exit;} function extend ($ file_name) {$ extend = pathinfo ($ file_name); $ extend = strtolower ($ extend ["extension"]); return $ extend ;}

Delete image files

Function deleteImg (obj) {$ (obj ). remove (); // ajax deletes the image file var src = $ (obj ). data ('src'); $. ajax ({type: "POST", url: "{sh: U ('goods/deleteImg ')}", data: "src =" + src, success: function (msg) {}}) ;}// Delete the image to avoid space insufficiency. public function deleteImg () {if (IS_AJAX) {$ src = $ this-> _ post ('src'); if (! Unlink ($ src) {echo "failed to delete file {$ src}";} else {echo "file {$ src} deleted ";}}}

The above content is related to the essence of Ajax image uploading. I hope to help you above!

Articles you may be interested in:

• PHP + jQuery + Ajax for multi-Image Upload
• Self-built ajax Image Upload (not available on the Internet)
• Example of php + ajax function for uploading image files
• Swfupload ajax example code for refreshing image uploads
• Jquery's ajaxSubmit () asynchronously uploads images and saves form data DEMO code
• Batch upload of Images Using JQuery + ajax (self-writing)
• Implementation Code of Jquery ajaxsubmit for uploading images
• Javascript asynchronous form submission, Image Upload, and compatibility with asynchronous ajax Simulation Technology
• Php ajax example code for refreshing upload of images