求js多张图片上传，可预览右上角带删除图标的代码

Posted 2023-05-04

求js多张图片上传，可预览右上角带删除图标的代码；我想通过一个file button来选择图片，可一次选择一张或多张。选择后的图片显示在一个div中，可以对它进行删除。此外，用表单提交js页面的图片可以上传到服务器吗？

参考技术A

可以用dropzone.js试试，官网： http://www.dropzonejs.com/，你看看就知道了。上面有一个demo，你试试

 

 

追问

这种效果很不错，但是没有代码啊，求帮忙。

追答

不是说了嘛，是dropzone.js啊，你下载下来，引用一下路径，稍微配置一下就OK了啊。前提是有jquery

js-jssdk微信H5选择多张图片预览并上传（兼容ios，安卓，已测试）

值得注意的是：

1.在微信H5中选择图片运用：wx.chooseImage，成功后返回：  res.localIds用于上传图片使用

   上传图片：wx.uploadImage。

2.上传图片的时候务必是一张一张的上传的（建议采用递归）

3.一张图片上传成功后务必需要延迟个几百毫秒再执行下一张的上传。

 

案例：深圳艺星“#美力女生#星粉颜值夏令营，2019Yestar艺星整形”

Html

<div class="photos">
     <p>同时选择上传1-9张照片，第一张为封面图</p>
     <div class="photosInput">
          <div id="dd"></div>   //这里面是存储放置上传的图片的
          <div onclick="ChoosePhoto()" id="chooseimgDiv" >选择图片</div>
     </div>
</div>

 

 

js:

var imgA=new Array();
var imgserverId;  //存储的图片拼接字符；
function ChoosePhoto()
    wx.chooseImage(
	count: 9, // 默认9
	sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有
	sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有
	success: function (res) 
		document.getElementById("dd").innerHTML="";
                imgA=[];
		imgserverId="";
		var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                var htmlPhoto="";
                for(var i=0;i<localIds.length;i++)
			htmlPhoto +=‘<div class="imgdiv"><img src=‘+ localIds[i]+‘ /></div>‘;
                
		syncUpload(localIds) 
		document.getElementById("dd").innerHTML+=htmlPhoto;
	
    );
;

   var syncUpload = function(localIds)
         var localId = localIds.pop();
	 wx.uploadImage(
		 localId: localId.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
		 isShowProgressTips: 1, // 默认为1，显示进度提示
		 success: function (res) 
		      //res.serverId 返回图片的服务器端ID
			var serverId = res.serverId; // 返回图片的服务器端ID
			imgA.push(serverId)
			imgserverId=imgA;
			if(localIds.length > 0)
               			 window.setTimeout(function()
               				 syncUpload(localIds);
    				 ,100);
           		 else
           			 window.setTimeout(function()
               				  downloadImage(0);
    				,100);
           					
            		
		 
	 )

　　

　

 

题外话：

在ios中之前做项目时也有遇到一个需求是“分享朋友圈后抽奖次数+1”。的情况。

安卓能够好好的判断接收到用户分享成功。但是ios则不会成功。

我们的解决办法也是需要延迟几百毫秒才能正常成功的接收到苹果的分享反馈