ajax上传图片的本质

1.图片上传到服务器。

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

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

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

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

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

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

• 点击按钮

[站外图片上传中……(2)]
 

   添加图片 
 

• 上传表单

• 触发事件

$("#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 '

                [站外图片上传中……(3)]
                
                [站外图片上传中……(4)]
                
';
            }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}删除成功";
            }
        }
    }