Jquery 上载前无法查看图像预览

我使用以下代码上传图像，并在上传前显示预览。但我无法查看预览。有人能找到我犯错误的地方吗

HTML

       <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 -->    

主要有两个错误

imgId = '#preview-' + $(input).attr('id');
$(imgId).attr('src', e.target.result);

首先，您尝试将

src

属性分配给

标签，而不是
img
标签，
您应该将分配给标签的
id
添加到该图像，将其分配给图像

然后您选择了错误的表单
form#mainform
和错误的元素
div.upload-image

$("form#mainform div.upload-image input[type='file']")

建议更改后，应如下所示

$("form#mainpost label input[type='file']")

然后选择
id
来检测预览元素
imgId='#预览-'+$（输入）.attr（'id'）而您应该选择
名称
属性，以便根据输入显示相关预览请参见eblow i创建的演示


函数readURL（输入）{
//console.log（'here'，input）；
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
imgId='#预览-'+$（输入）.attr（'name'）；
//console.log（imgId）
$（imgId.attr（'src'，e.target.result）；
};
reader.readAsDataURL（input.files[0]）；
}
}
$（“form#mainpost标签输入[type='file']）。on（'change'，function（）{
readURL（this）；
});
img.upload-image{
最大宽度：100px；
最大高度：100px；
溢出：隐藏；
}
标签{
显示：内联块；
}

你的广告照片（这将是你的封面照片）
选择要上载的文件您可以添加多个图像。
你得到的是什么错误？@MuhammadOmerAslam我没有发现任何错误添加了一个答案，看看是否有帮助，请将答案标记为正确，因为它已经解决了第一次尝试中提出的问题。有没有办法，不需要对html进行任何更改，它就可以done@sanojlawrence在这种情况下，请创建一个图像元素，并在运行时将其插入onload中的标签中。请您帮助我。我试着用我的代码来回答这个问题cant@sanojlawrence好的，但你的问题中没有列出你不能更改html的任何地方，很抱歉英语思维薄弱，我提到了所有事情
$("form#mainpost label input[type='file']")