javascript - HTML 文件上传

Question

我正在尝试让文件上传适用于 3 个不同的 div id(每个都有各自的预览)，我已经接近它的工作状态，但第一个 div 替换了其他两个 div 内容。

我不确定我在 Javascript 方面做错了什么(不太精通 js)，任何帮助将不胜感激!

function readURL(input, target) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            var image_target = $(target);
            reader.onload = function (e) {
                image_target.attr('src', e.target.result).show();
            };
            
            reader.readAsDataURL(input.files[0]);
         }
    }  
    
    $("#pic1").live("change",function(){
        readURL(this, "#preview1");
    });
     $("#pic2").live("change",function(){
        readURL(this, "#preview2");
    });
     $("#pic3").live("change",function(){
        readURL(this, "#preview3");
    });

.input-file-row-1:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.input-file-row-1{
    display: inline;
	margin-top: 25px;
	position: relative;
}

#preview_image {
  display: inline;
  width: 90px;
  height: 90px;
  margin: 2px 0px 0px 5px;
  border-radius: 10px;
}

.upload-file-container { 
	position: relative; 
	width: 100px; 
	height: 137px; 
	overflow: hidden;	
	background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
	float: left;
	margin-left: 23px;
} 

.upload-file-container-text{
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	color: #719d2b;
	line-height: 17px;
	text-align: center;
	display: block;
	position: absolute; 
	left: 0; 
	bottom: 0; 
	width: 100px; 
	height: 35px;
}

.upload-file-container-text > span{
	border-bottom: 1px solid #719d2b;
	cursor: pointer;
}

.one_opacity_0 {
  opacity: 0;
  height: 0;
  width: 1px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="" method="post" action="#" class="feedback-form-1">
    <fieldset>
        <div class="input-file-row-1">
	        <div class="upload-file-container">
                <img id="preview1" src="#" alt="" />
			    <div class="upload-file-container-text">
                    <div class = 'one_opacity_0'>
                        <input type="file" id="pic1" label = "add" />
                    </div>
                    <span> Add Photo </span>
				</div>
			</div>
        </div>
	</fieldset>
</form>
<form name="" method="post" action="#" class="feedback-form-1">
    <fieldset>
        <div class="input-file-row-1">
	        <div class="upload-file-container">
                <img id="preview2" src="#" alt="" />
			    <div class="upload-file-container-text">
                    <div class = 'one_opacity_0'>
                        <input type="file" id="pic2" label = "add" />
                    </div>
                    <span> Add Photo </span>
				</div>
			</div>
        </div>
	</fieldset>
</form>
<form name="" method="post" action="#" class="feedback-form-1">
    <fieldset>
        <div class="input-file-row-1">
	        <div class="upload-file-container">
                <img id="preview3" src="#" alt="" />
			    <div class="upload-file-container-text">
                    <div class = 'one_opacity_0'>
                        <input type="file" id="pic3" label = "add" />
                    </div>
                    <span> Add Photo </span>
				</div>
			</div>
        </div>
	</fieldset>
</form>

Answer 1

不推荐使用“live”方法，而是将代码更改为:

$("#pic1").on("change",function(){
    readURL(this, "#preview1");
});
 $("#pic2").on("change",function(){
    readURL(this, "#preview2");
});
 $("#pic3").on("change",function(){
    readURL(this, "#preview3");
});