Javascript jQuery文件上载预览/删除图像
您可以在以下位置找到工作文件: 图像预览和删除功能很早就开始工作了,但由于一些库的原因,我在html代码中做了一些更改。所以现在图像预览无法工作,因为Jquery中存在父类调用问题。请检查工作代码并帮助我解决它。Im使用同名数组的多个输入。所以我想在下一个div中显示图像,正如我在html代码中提到的那样。我知道问题出在jquery上。但我无法修复它。请帮忙Javascript jQuery文件上载预览/删除图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,您可以在以下位置找到工作文件: 图像预览和删除功能很早就开始工作了,但由于一些库的原因,我在html代码中做了一些更改。所以现在图像预览无法工作,因为Jquery中存在父类调用问题。请检查工作代码并帮助我解决它。Im使用同名数组的多个输入。所以我想在下一个div中显示图像,正如我在html代码中提到的那样。我知道问题出在jquery上。但我无法修复它。请帮忙 function readURL() { var $input = $(this); if (this.files &
function readURL() {
var $input = $(this);
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
reset($input.next('.delbtn'), true);
$input.next('.portimg').attr('src', e.target.result).show();
$input.after('<input type="button" class="delbtn removebtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtn', function (e) {
reset($(this));
});
function reset(elm, prserveFileName) {
if (elm && elm.length > 0) {
var $input = elm;
$input.next('.portimg').attr('src', '').hide();
if (!prserveFileName) {
$input.prev('.fileUpload').val("");
}
elm.remove();
}
}
函数readURL(){
var$input=$(此);
if(this.files&&this.files[0]){
var reader=new FileReader();
reader.onload=函数(e){
重置($input.next('.delbtn'),true);
$input.next('.portimg').attr('src',e.target.result).show();
$input.after('');
}
reader.readAsDataURL(this.files[0]);
}
}
$(“.fileUpload”).change(readURL);
$(“表格”)。在('click','delbtn',函数(e){
重置($(此));
});
功能重置(elm、prserveFileName){
如果(elm&&elm.length>0){
var$input=elm;
$input.next('.portimg').attr('src','.hide();
如果(!prserveFileName){
$input.prev('.fileUpload').val(“”);
}
elm.remove();
}
}
html代码
<form> <!--working code but it not needed now.-->
<div class="form-group hirehide is-empty is-fileinput width100">
<div class=socialmediaside2>
<input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic type=file value="Choose a file">
<img alt="your image" class=portimg src=#>
<div class=input-group>
<input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
<span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
</div>
</div>
</div>
<!--below code is not working. I need this to be work-->
<div class="form-group hirehide is-empty is-fileinput width100">
<div class=socialmediaside2>
<input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic type=file value="Choose a file">
<div class=input-group>
<input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
<span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
</div>
</div>
</div>
<div class=upload-demo>
<div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
附加文件
附加文件
只需添加以下html代码即可。检查工作现在检查下面评论中的更新链接
<img alt="your image" class=portimg src=#>
请尝试此版本: HTML:
附加文件
附加文件
附加文件
JS:
函数readURL(){
var$input=$(此);
var$newinput=$(this.parent().parent().parent().find('.portimg');
if(this.files&&this.files[0]){
var reader=new FileReader();
reader.onload=函数(e){
重置($newinput.next('.delbtn'),true);
$newinput.attr('src',e.target.result).show();
$newinput.after(“”);
}
reader.readAsDataURL(this.files[0]);
}
}
$(“.fileUpload”).change(readURL);
$(“表格”)。在('click','delbtn',函数(e){
重置($(此));
});
功能重置(elm、prserveFileName){
如果(elm&&elm.length>0){
var$input=elm;
$input.prev('.portimg').attr('src','.hide();
如果(!prserveFileName){
$($input.parent().parent().parent().find('input.fileUpload').val(“”);
//input.fileUpload和input#uploadre都需要为特定div清空值
}
elm.remove();
}
}
JSFIDLE:否。我需要在下一个div中显示图像。我想在下面的代码中显示。您需要更改JS文件Pawan,因为它有一个小问题,比如它只能以不同的形式工作。它不支持在同一个表单中放置两个三个输入字段。但亚历克斯帮我解决了这个问题。这段代码运行良好,它只适用于单个输入。我有多个同名数组的输入。因此,它不支持。请帮我解决这个问题。嗨@Alex它还有一个小问题,比如它只能以不同的形式工作。我需要在表单中使用这些多个输入(具有相同名称的数组)。请检查此JSFIDLE并尝试修复它。提前谢谢。在这种情况下,我们需要一个额外的标签,请检查我的更新后,上面。很高兴听到。每个块必须在不同的脚本中才能区分它们,因为它在删除时有一个小问题。当我点击“删除”按钮时,特定图像被删除,但所有输入文件也变为空。特定图像和特定文件输入应为空。请检查这个代码。我建议使用,而不是使用FileReader@Endless如果您可以提供URL.createObjectURLBetter的JSFIDLE,那么您将得到一个性能测试:@influent-woow这很好。您知道如何将此工作代码文件读取器转换为URL.createObjectURL吗?
<form>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
<div class=socialmediaside2>
<input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
<div class=input-group>
<input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
<span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
</div>
</div>
</div>
<div class=upload-demo>
<div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
<div class=socialmediaside2>
<input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
<div class=input-group>
<input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
<span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
</div>
</div>
</div>
<div class=upload-demo>
<div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
<div class=socialmediaside2>
<input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
<div class=input-group>
<input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
<span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
</div>
</div>
</div>
<div class=upload-demo>
<div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
</form>
function readURL() {
var $input = $(this);
var $newinput = $(this).parent().parent().parent().find('.portimg ');
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
reset($newinput.next('.delbtn'), true);
$newinput.attr('src', e.target.result).show();
$newinput.after('<input type="button" class="delbtn removebtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtn', function (e) {
reset($(this));
});
function reset(elm, prserveFileName) {
if (elm && elm.length > 0) {
var $input = elm;
$input.prev('.portimg').attr('src', '').hide();
if (!prserveFileName) {
$($input).parent().parent().parent().find('input.fileUpload ').val("");
//input.fileUpload and input#uploadre both need to empty values for particular div
}
elm.remove();
}
}