主要2个错误
imgId = '#preview-' + $(input).attr('id');
$(imgId).attr('src', e.target.result);
首先,您尝试分配
src
属性到
label
而不是
img
标签
<label class="upload-image" for="img1" id="preview-img1">
您应该添加
<img>
输入后在每个标签内标记,然后分配
src公司
对于该图像
id
您已指定给标签,请将其指定给图像
<img class="upload-image" id="preview-img1" src="" />
。
那么您选择了错误的表单
form#mainform
和错误的元素
div.upload-image
$("form#mainform div.upload-image input[type='file']")
建议更改后应如下所示
$("form#mainpost label input[type='file']")
然后选择
身份证件
检测预览元素的步骤
imgId = '#preview-' + $(input).attr('id');
而你应该选择
name
属性,以便根据输入显示相关预览请参见eblow i创建的演示
function readURL(input) {
//console.log('here', input);
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
imgId = '#preview-' + $(input).attr('name');
//console.log(imgId)
$(imgId).attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$("form#mainpost label input[type='file']").on('change', function() {
readURL(this);
});
img.upload-image {
max-width: 100px;
max-height: 100px;
overflow: hidden;
}
label {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" id="mainpost">
<fieldset>
<div class="section postdetails">
<div class="row form-group add-image">
<label class="col-sm-3 label-title">Photos for your ad <span>(This will be your cover photo )</span> </label>
<div class="col-sm-9">
<h5><i class="flaticon-upload" aria-hidden="true"></i>Select Files to Upload<span>You can add multiple images.</span></h5>
<div class="upload-section">
<label for="img1">
<input type="file" name="img1" id="upload-image-one"><img class="upload-image" id="preview-img1" src="" />
</label>
<label for="img2">
<input type="file" name="img2" id="upload-image-two"><img class="upload-image" id="preview-img2"/>
</label>
<label classfor="img3">
<input type="file" name="img3" id="upload-image-three" ><img class="upload-image" id="preview-img3"/>
</label>
<label for="img4">
<input type="file" name="img4" id="upload-image-four"><img id="preview-img4" class="upload-image" id="preview-img4"/>
</label>
</div>
</div>
</div>
</div>
<!-- section -->
</fieldset>
</form>
<!-- form -->
EDIT
由于您不想或无法更改html,因此必须手动装箱图像元素并插入标签中
function readURL(input) {
//console.log('here', input);
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
imgId = '#preview-' + $(input).attr('name');
let img = document.createElement('img');
img.setAttribute('src', e.target.result);
img.setAttribute('class', 'img-preview');
document.querySelector(imgId).appendChild(img);
//console.log(imgId)
//$(imgId).append('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$("form#mainpost label input[type='file']").on('change', function() {
readURL(this);
});
img.img-preview {
max-width: 100px;
max-height: 100px;
overflow: hidden;
}
label {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" id="mainpost">
<fieldset>
<div class="section postdetails">
<div class="row form-group add-image">
<label class="col-sm-3 label-title">Photos for your ad <span>(This will be your cover photo )</span> </label>
<div class="col-sm-9">
<h5><i class="flaticon-upload" aria-hidden="true"></i>Select Files to Upload<span>You can add multiple images.</span></h5>
<div class="upload-section">
<label class="upload-image" for="img1" id="preview-img1">
<input type="file" name="img1" id="img1">
</label>
<label class="upload-image" for="img2" id="preview-img2">
<input type="file" name="img2" id="upload-image-two">
</label>
<label class="upload-image" for="img3" id="preview-img3">
<input type="file" name="img3" id="upload-image-three" >
</label>
<label class="upload-image" for="img4" id="preview-img4">
<input type="file" name="img4" id="upload-imagefour">
</label>
</div>
</div>
</div>
</div>
<!-- section -->
</fieldset>
</form>
<!-- form -->
