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;
}

style.css

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;
}

获取uuid

function AddUpload(divId) {
var div = $('

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 = $('

');
var closeBtn = $('');
$(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);
}

index.js

调用

<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>

demo.html

附件

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