让上传成功的图片显示出来(☆)

最新推荐文章于 2021-09-15 17:00:33 发布

原创最新推荐文章于 2021-09-15 17:00:33 发布 · 754 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #jquery

工具专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种使用Ajax技术动态加载图片到HTML页面的方法。通过分析JavaScript代码，我们了解到如何发送POST请求获取图片路径，并利用返回的数据在指定的div元素中显示多张图片。这一过程涉及到了Ajax的基本用法、数据解析及DOM操作。

html

<div id="showImg" style="border:1px dashed #000;">
        
    </div>

 $.ajax({
            url: $path + '/ebayKanDeng/draft/getEbayItem',
            type: 'post',
            dataType: 'json',
            data: 'Id='+id ,
            success:function(data){
            	
            	console.log(data);
            	if(!(data.result.data.imgPath==null)){
            		
            		var imgPath=data.result.data.imgPath;
            		var imgPaths=new Array();
            		imgPaths=imgPath.split(",");
            		for(i=0;i<imgPaths.length;i++){
            			//alert(imgPaths[i]);
            			var imgDiv=document.getElementById('showImg');
            			var bigImg = document.createElement("img"); 
            			bigImg.width="300";
            			bigImg.src=imgPaths[i];
            			imgDiv.appendChild(bigImg);
            		}
            	}
               
            },error:function(data){
            	
            	alert("数据加载异常"+data.id);
            }
        })