#添加图片,最多只能上传9张.md

#添加图片,最多只能上传9张.md
前端页面:
```javascript
<form id="imgForm" enctype="multipart/form-data" action="/investManage/financing/addImg.do" target="frameFile" style="width: 66%;" method="post">
                <div class="message image_show">              
                    <div class="left">图片最多9张:</div>
                    <div class="right">
                        <div class="upload_images">
                            <input size="9" id="fileImage" type="file" name="file"/>
                            <div class="upload_img blue" style="cursor: pointer;">上传</div>
                        </div>
                        <div class="show_img"></div>
                        <div id="preview" class="upload_preview"></div>
                    </div>                                                           
                </div>
            </form>
```
插件:ImgListPreview.js
js代码:

```javascript

$(".upload_img ").on("click",function(){
    max_nine();
});
function uploadFunc(){
    var val_ = $("#fileImage").val();
    var newVal = val_.split(".");
    console.log(newVal);
    var reg_ = /^(jpg|png|jpeg|gif)$/;
    if(val_!==''&&reg_.test(newVal[newVal.length-1])) {
        $("#imgForm").ajaxSubmit({
            type: "post",
            url: "/investManage/financing/addImg.do",
            data: {"projectId": localStorage.projectId},
            dataType: "json",
            success: function (obj) {
                if (obj.login && obj.status == 1) {
                    console.log(obj.data);
                    var imgList = $(".upload_image");
                    for (var i = 0; i < imgList.length; i++) {
                        imgList.eq(i).attr({
                            "data-imageUrl": obj.data.imageUrl,
                            "data-imageId": obj.data.imageId,
                            "data-imageName": obj.data.imageName
                        });
                    }
                    alert("上传图片成功!");
                    window.location.reload();
                    //max_nine();
                } else if (obj.login == false) {
                    alert(obj.msg);
                    window.location.href = "login.html";
                } else {
                    alert(obj.msg);
                }
            },
            error: function () {
                alert("服务器错误,上传图片失败!");
            }
        });
    }
}
//移除预览但未上传给后台的图片
$(document).on("click","#preview a",function() {
    alert("删除预览");
    $(this).parent().parent().remove();
});
//移除已经上传的照片 调取后台
$(document).on("click",".show_img .delete",function(){
    var _this = $(this);
    //var imgId = _this.parent().find($(".upload_image")).attr("data-imageId");
    var imgId = _this.parent().parent().find("img").attr("data-imageId");
    console.log(imgId);
    $.ajax({
        type:"post",
        url:"/investManage/financing/deleteImg.do",
        data:{"projectId":localStorage.projectId,"imgId":imgId},
        async:true,
        dataType:"json",
        success:function( obj ){
            if (obj.login && obj.status==1) {
                _this.parent().parent().remove();
                alert(obj.data);
                max_nine();//移除后再检查一次
            } else if(obj.login == false){
                alert(obj.msg);
                window.location.href = "login.html";
            }else{
                alert(obj.msg);
            }
        },
        error:function(){
            alert("服务器错误,请稍后再试!");
        }
    });   
});
 
```
上一篇:适应各浏览器图片裁剪无刷新上传jQuery插件(转)


下一篇:简单的 Android 拍照并显示以及获取路径后上传