原生ajax上传多图然后显示

xiaoxiao2021-02-27  164

$("#file_upload").change(function () {         var $file = $(this);         var fileObj = $file[0];         var windowURL = window.URL || window.webkitURL;         var dataURL;         var $img = $(".preview");         var html = '';         if (fileObj && fileObj.files && fileObj.files[0]) {                         // dataURL = windowURL.createObjectURL(fileObj.files[0]);             // $img.attr('src', dataURL);                                                      var myfile = new FormData();             myfile.append('uploadfile',this.files[0]);             var xhr = new XMLHttpRequest();             xhr.open('post','/treasureWeb/fileUpload/ uploadPicture.do',true);             xhr.onreadystatechange = function(){                 if(xhr.readyState == 4){                     attachments = JSON.parse(xhr.responseText).data;                     html = '<div class="shape  f-float-left" >'                                 +'<img class="preview" src="' + attachments + '"/>'                                 +'<div class="detail">'                                     +'<a class="closeBtn" style="cursor: pointer;">X</a>'                                 +'</div>'                                 +'<div class="bg"></div>'                             +'</div>';                     $('.pic').append(html);                 }             }             xhr.send(myfile);         } else {             dataURL = $file.val();             var imgObj = document.getElementById("preview");             // 两个坑:             // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;             // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;             imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";             imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;         }     });
转载请注明原文地址: https://www.6miu.com/read-9382.html

最新回复(0)