自定义图片上传

超简单超好用的图片上传

看效果：

二话不说，直接上源码。

HTML：

<form multiple="">
    <div id="Pic_pass">
        <p style="font-size: 20px;font-weight: bold;">请上传详细照片 </p>
        <p><span style="color: red">注：每张照片大写不可超过4M，且最多可以传十张</span></p>
        <div class="picDiv">
            <div class="addImages">
                <input id="files" class="file" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg" type="file">
                <div class="text-detail">
                    <span>+</span>
                    <p>点击上传</p>
                </div>
            </div>
        </div>
    </div>
</form>

CSS：

.imageDiv {display:inline-block;width:160px;height:130px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px dashed darkgray;background:#f8f8f8;position:relative;overflow:hidden;margin:10px}
.cover {position:absolute;z-index:1;top:0;left:0;width:160px;height:130px;background-color:rgba(0,0,0,.3);display:none;line-height:125px;text-align:center;cursor:pointer;}
.cover .delbtn {color:red;font-size:20px}
.imageDiv:hover .cover {display:block;}
.addImages {display:inline-block;width:160px;height:130px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px dashed darkgray;background:#f8f8f8;position:relative;overflow:hidden;margin:10px}
.text-detail {margin-top:40px;text-align:center}
.text-detail span {font-size:40px}
.file {position:absolute;top:0;left:0;width:160px;height:130px;opacity:0}

JS：

var userAgent = navigator.userAgent; //用于判断浏览器类型
$(".file").change(function() {
    // formdata 创建个对象
    var formData = new FormData(document.querySelector("form"));
    $this = $(this);
    //获取选择图片的对象
    var docObj = $(this)[0];
    // console.log(docObj);
    var picDiv = $(this).parents(".picDiv");
    //得到所有的图片文件
    var fileList = docObj.files;
    console.log(fileList);
    //循环遍历
    for (var i = 0; i < fileList.length; i++) {
        //formdata 赋值数据
        formData.append('file'+i,$this[0].files[i]);
        //动态添加html元素
        var picHtml = "<div class='imageDiv' ><img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>";
        console.log(picHtml);
        picDiv.prepend(picHtml);
        //获取图片imgi的对象
        var imgObjPreview = document.getElementById("img" + fileList[i].name);
        if (fileList && fileList[i]) {
            //图片属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '160px';
            imgObjPreview.style.height = '130px';
            //imgObjPreview.src = docObj.files[0].getAsDataURL();
            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
            if (userAgent.indexOf('MSIE') == -1) {
                //IE以外浏览器
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
                console.log(imgObjPreview.src);
                // var msgHtml = '<input type="file" id="fileInput" multiple/>';
            } else {
                //IE浏览器
                if (docObj.value.indexOf(",") != -1) {
                    var srcArr = docObj.value.split(",");
                    imgObjPreview.src = srcArr[i];
                } else {
                    imgObjPreview.src = docObj.value;
                }
            }
        }
    }
    // 长传至服务器
    var result = do_upload(formData);

});

// 删除功能
$("div").delegate('.delbtn','click',function() {
    var _this = $(this);
    // 删除服务器图片
    // 略。。。。
    _this.parents(".imageDiv").remove();
});

function do_upload(filedata){
    var url = module + '/server/pic/ajaxUpload';
    $.ajax({
        async: false,
        url: url,
        type: 'POST',
        data: filedata,
        cache: false,
        processData: false,
        contentType: false,
        beforeSend : function(XMLHttpRequest){
            //loading层
            load_index = layer.load(0, {
                shade: [0.2,'#777'] //0.1透明度的白色背景
            }); 
        },
        complete : function(XMLHttpRequest, r){
            layer.close(load_index);
        },
        success : function(res){
            if (res.success === true) {
                // $("form input[name='image_url']").val(res.data);
                layer.msg('已上传');
            } else {
                layer.msg(res.msg);
            }
        },
        error : function(){
            layer.msg('异常，请重新尝试。');
        }
    });
}

function del_img(filepath){
    // 略。。。。
}

 

更新 - 20180831   将删除事件拿出change事件外，否则删除会重复触发。