- 38
- 0
想要做一个多图上传预览的功能,目前只实现了单图上传预览删除,在原基础上修改不知从何入手,大牛们帮忙看看。
html:
<div class="form-group">
<div class="col-sm-2 control-label">图片预览</div>
<div class="col-sm-10">
<img src="" id="img" width="100px" height="100px">
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">图片上传</div>
<div class="col-sm-10">
<input id="photoCover" class="form-control" readonly type="text">
<label class="input-group-btn">
<input id="file" type="file" name="file" multiple="multiple" style="left: -9999px; position: absolute;">
<span class="btn btn-default">选择图片</span>
</label>
</div>
</div>
js部分
//图片预览
$(function () {
$("#file").change(function (e) {
var file = e.target.files[0];
$('#photoCover').val(document.getElementById("file").files[0].name);
if (file) {
var reader = new FileReader();
reader.onload = function () {
$("img").attr("src", this.result);
}
reader.readAsDataURL(file);
}
});
})
//表单保存
savefunction (event) {var url = "network/server/update";
var networkServiceType = $("#networkServiceType").val().trim();
var networkServiceName = $("#networkServiceName").val().trim();
var networkServiceAdd = $("#networkServiceAdd").val().trim();
var networkServiceTel = $("#networkServiceTel").val().trim();
var networkServiceLongitude = $("#networkServiceLongitude").val().trim();
var networkServiceLatitude = $("#networkServiceLatitude").val().trim();
var file = document.getElementById("file").files[0];
var formData = new FormData();
formData.append('networkServiceType', networkServiceType);
formData.append('networkServiceName', networkServiceName);
formData.append('networkServiceAdd', networkServiceAdd);
formData.append('networkServiceTel',networkServiceTel);
formData.append('networkServiceLongitude',networkServiceLongitude);
formData.append('networkServiceLatitude',networkServiceLatitude);
formData.append('file', file);
$.ajax({
type: "POST",
url: projectname + url,
data: formData,
contentType: false,
processData: false,
mimeType: "multipart/form-data",
success: function (data) {
if(data.code ===0){
alert('操作成功', function(index){
vm.reload();
});
}else{
alert(data.msg);
}
}
});
}, - 共 0 条
- 全部回答
-
一个人也不错 普通会员 1楼
在原生HTML和JavaScript中,我们通常不支持图片的上传,因为我们主要关注的是数据的传输和处理。但是,如果你需要在HTML中创建一个简单的图片上传功能,你可以使用HTML5的FileReader API。以下是一个简单的示例:
HTML部分:
html <input type="file" id="fileInput">JavaScript部分:
javascript document.getElementById('fileInput').addEventListener('change', function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.src = e.target.result; document.getElementById('image').src = img.src; } reader.readAsDataURL(file); });在这个示例中,当用户选择一个文件时,它会触发FileReader的事件。然后,我们创建一个新的FileReader对象,并设置一个onload回调函数,该函数会在FileReader读取完成后被调用。在这个回调函数中,我们创建一个新的Image对象,并设置它的src属性为FileReader读取的DataURL,然后将Image对象的src属性设置为用户选择的文件的URL。最后,我们将Image对象的src属性设置为新Image对象的src,以便在用户查看图片时显示。
注意:这个示例需要在支持FileReader API的浏览器中运行,如Chrome、Firefox和Safari。在IE中,你需要使用FileReader API的polyfill,如FileReader.js。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
