ajax上传图片的本质

1.图片上传到服务器。

2.后台将图片地址传到html页面，以图片形式展现。

3.后天将图片地址加入到input表单中，表单处于隐藏状态。

4.前端删除图片，通过js操作，移除图片与表单数据。

5.图片上传表单，是单独的。不能嵌套在总的表单中。

6.牛逼的图片上传，可以对图片进行处理。压缩，加水印等。

7.点击btn，触发图片点击，图片改变之后，触发图片表单提交。

• 点击按钮

<div id="up_status" style="display:none"><img src="{sh::PUB}/img/loader.gif" alt="uploading"/></div>
 <div id="up_btn" class="carousel-btn">
   <span>添加图片</span> 
 </div>
<div id="carousel-preview"></div>

• 上传表单

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

• 触发事件

$("#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(){ // 提交前，用加载的图片显示
					status.show();
					btn.hide();
				}, 
				success:function(){ // 提交后，加载的图片显示
					status.hide();
					btn.show();
				}, 
				error:function(){
					status.hide();
					btn.show();
			} }).submit();
		});

• 后端验证与处理

 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 '请选择要上传的图片';
                exit;
            }
            $ext = $this->extend($name);
            if(!in_array($ext,$extArr)){
                echo '图片格式错误！';
                exit;
            }
            if($size>(2000*1024)){
                echo '图片大小不能超过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);">
                <img src="'.PUB.'img/delete.png" class="carousel-container-del">
                <input name="goodsimg[]" value="'.$path.$image_name.'" type="hidden">
                <img src="'.$path.$image_name.'"  class="preview">
                </div>';
            }else{
                echo '上传出错了！';
            }
            exit;
        }
        exit;
    }


    function extend($file_name){
        $extend = pathinfo($file_name);
        $extend = strtolower($extend["extension"]);
        return $extend;
    }

• 删除图片文件

function deleteImg(obj) {
		$(obj).remove();
		// ajax 删除图片文件
		var src = $(obj).data('src');
		$.ajax({
		   type: "POST",
		   url: "{sh::U('Goods/deleteImg')}",
		   data: "src="+src,
		   success: function(msg){}
		});
	}

// 删除图片，避免造成空间不足
    public function deleteImg() {
        if (IS_AJAX) {
            $src = $this->_post('src');
            if(!unlink($src))
            {
                echo "文件{$src}删除失败";
            }
            else
            {
                echo "文件{$src}删除成功";
            }
        }
    }