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}删除成功";
        }
    }
}