html 多图片上传 预览 ajax 提交 附件上传 js获取uuid

样式

a{
    text-decoration: none;
}
.div_enclosure{
    padding: 5px;
}
.div_enclosure p{
    font-size: 13px;
    line-height: 15px !important;
    margin-bottom: 5px;
}
.enclosures .div_img_preview {
    width: 60px;
    height: 60px;
    margin-top: 10px;
    margin-right: 10px;
    float: left;
    position: relative;  
}
.enclosures .div_img_preview img{
    width: 100%;
    height: 100%;
}


/*样式1*/ 
.a-upload {  
    background-image: url('/content/img/ic_add_image.png');
    background-size: cover;
    cursor: pointer;   
    overflow: hidden;  
    display: inline-block;  
    *display: inline;  
    *zoom: 1 
}  
.a-upload  input {  
    position: absolute;  
    font-size: 100px;  
    right: 0;  
    top: 0;  
    opacity: 0;  
    filter: alpha(opacity=0);  
    cursor: pointer 
}

.span_close{
    display: block;
    width: 20px;
    height: 20px;
    background-image: url('/content/img/ic_delete_menu.png');
    background-size: cover;
    position: absolute;
    top: -10px;
    right: -10px;
}

js

//生成uuid()
function getUuid() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";
  
    var uuid = s.join("");
    return uuid;
}

function AddUpload(divId) {
    var div = $('<div class="div_img_preview a-upload"></div>')
    var inputFile = $('<input type="file" name="files" id="file1" accept="image/*" value="上传" multiple />');
    $(inputFile).on("change", function (e) {
        var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;

        //预览
        for (var i = 0, len = files.length; i < len; ++i) {
            var file = files[i];

            var filetype = file.type;
            var size = file.size;
            if (size > 10 * 1024 * 1024) {
                alert("请上传小于10M的图片");
            }
            else {
                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }

                var uuid = getUuid();
                curFiles.push(
                    {
                        uuid: uuid,
                        file: file
                    });

                var previewDiv = $('<div class="div_img_preview" uuid="' + uuid + '"><img src="' + src + '" /></div>');
                var closeBtn = $('<span class="span_close"></span>');
                $(closeBtn).click(function () {
                    var thisdiv = $(this).parent();
                    var thisuuid = $(thisdiv).attr("uuid");
                    curFiles.removeKey("uuid", thisuuid);
                    $(thisdiv).remove();
                });
                $(previewDiv).append(closeBtn);
                $(this).parent().before(previewDiv);
            }
        }
        if (files.length > 0) {
            //隐藏当前上传按钮
            $(this).parent().hide();
            //添加新上传按钮
            AddUpload(divId);
        }
    });
    $(div).append(inputFile);
    $("#" + divId).append(div);
}

调用

<div class="div_enclosure">
                <p>附件:</p>
                <div class="enclosures" id="divEnclosures">

                </div>
            </div>

<script>
var curFiles = [];//用于保存上传后的图片

        //添加上传按钮
        AddUpload("divEnclosures");



 function submit() {
        var form = new FormData($("#createForm")[0]);
        for (var [a, b] of form.entries()) {
            //如果value是file类型的
            if (b instanceof File) {
                if (b.name != "") {
                    //先将表单中原有的fileList对象中的文件删除
                    form.delete(a);
                    for (var i = 0; i < curFiles.length; i++) {
                        //然后再将curFiles的文件追加到表单中
                        form.append(a, curFiles[i].file);
                    }
                    //var f1 = new File([],"");
                    //form.append(a,f1);
                }
            }
        }
        $.ajax({
            url: BaseUrl + 'pm/message/saveMeaasge',
            type: 'post',
            cache: false,
            data: form,
            processData: false,
            contentType: false,
            success: function (data) {
                location.href = returl;
            }
        });
    }
</script>

附件

注：以上代码属个人整理，用于交流学习。（QQ/微信：742010299 昵称：同心同德）