Ajax upload images are intrinsically _ajax related

1. Upload the picture to the server.

2. Backstage will upload the picture address to the HTML page, displays in the picture form.

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, through the JS operation, removes the picture and the form data.

5. Picture upload form, is separate. cannot be nested in a total form.

6. The image upload, you can deal with the picture. Compress, add watermark and so on.

7. Click BTN, trigger Picture Click, Picture change, trigger picture form submit.

Click on the button

<div id= "Up_status" style= "Display:none" >[station outside the picture crosses ... (2)] </div>
<div id= "up_btn" class= "carousel-btn" >
<span> Add picture </span> 
</div>
<div id= "Carousel-preview" ></div>

Upload a 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>

Triggering events

$ ("#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 submitting, display
with loaded picture Status.show ();
Btn.hide ();
}, 
success:function () {//submitted, the loaded picture shows
status.hide ();
Btn.show ();
}, 
error:function () {
status.hide ();
Btn.show ();
} ). submit ();
};

Back-end validation 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 the picture you want to upload '; exit;} $ext = $this->extend ($name); if (!in_array ($ext, $EXTARR)) {echo ' picture is malformed!
';
Exit } if ($size > 2000*1024) {echo ' picture size cannot exceed 2M '; 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); " > [outside the station picture crosses ... (3)] <input name= "goodsimg[" "value=" '. $path. $image _name. ' "type=" hidden "> [outside the station picture crosses ...
(4)] </div> '; }else{echo ' on the wrong!
';
} exit;
} exit; function extend ($file _name) {$extend = PathInfo ($file _name); $extend = Strtolower ($extend ["extension"]);
Extend }

Delete a picture file

function deleteimg (obj) {
$ (obj). remove ();
Ajax Delete picture file
var src = $ (obj). Data (' src ');
$.ajax ({
type: "POST",
URL: "{sh::u (' goods/deleteimg ')}",
data: "src=" +src,
success:function (msg) {}
});
}
Remove the picture to avoid causing insufficient space public
function deleteimg () {
if (is_ajax) {
$src = $this->_post (' src ');
if (!unlink ($SRC))
{
echo "file {$SRC} delete failed";
}
else
{
echo ' file {$src} to delete Success ';}
}}

The above content is a small series to introduce the Ajax upload pictures of the nature of the relevant information, I hope that the above help!