1.图片上传到服务器。

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

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

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

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

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

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

• 点击按钮

    
     
    
 
    
   
     添加图片  
    
    

• 上传表单

• 触发事件

$("#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 '
    
                
                     
                     
                     
    
';            }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}删除成功";            }        }    }