js多张图片上传
Ⅰ JS：上传图片
FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。
1.readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
2.readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
3.readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
上传并展示图片小例子：
参考文件： https://blog.csdn.net/xianweizuo/article/details/88911364
Ⅱ element-ui 表单新建 编辑 多张图片上传与删除
新建页面 和编辑页面 为同一个html
html里面多张图片上传 删除
（主要是通过uid 来对图片数组fileList5进行更新 删除）
（fileList5里面图片对象的url 都换成oss返回的图片url 替换掉之前的blob 统一起来更好处理 submit的时候可以直接取fileList5的数据）
（扔掉elemen-ui上传图片自带的fileList5里面的url 换成可以对接接口的url）
html：
<el-form-item label="认证文件" class='not-require'>
<el-upload action="" :before-upload='beforeUpload' :http-request="handleSuccessList5" :on-change="handleChange5" :file-list="fileList5" :on-remove='remove5' list-type="picture" multiple :limit='3'>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">每张图片大小不超过1M</div>
</el-upload>
</el-form-item>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
multiple 表示多选
:limit='3' 限制传3张
js：
//图片改变时 将图片数据push到fileList5中
handleChange5(file, fileList) {
this.fileList5.push(file)
},
此时fileList5
图片上传成功
handleSuccessList5(file) {
var file;
if (files.raw) { file = files.raw }else{file = files.file;}
//图片上传到oss
this.axios.get('/api/admin/vendor/uploadToken?path=images/').then(res =>{
var form = new FormData
form.append('name', file.name)
form.append('key', res.dir + '${filename}')
form.append('policy', res.policy)
form.append('OSSAccessKeyId', res.accessid)
form.append('success_action_status', '200')
form.append('signature', res.signature)
form.append('file', file, file.name)
this.axios({
method: 'post',
url: res.host,
data: form,
}).then(respond=>{
var url_img = 'https:' + res.host + '/' + res.dir + file.name
//handleChange5时已经将图片信息传入到fileList5中了 有当前图片的uid和url 但是url是blob形式的
//因为是多张图片 所以fileList5数组有多个值 循环通过uid 替换掉当前图片的url 将blob换成oss形式的图片
for (var i = 0; i < this.fileList5.length; i++) {
if (this.fileList5[i].uid == file.uid) {
this.fileList5[i].url = url_img
}
}
})
})
},
//删除图片 点击叉叉删除
remove5(file,fileList){
//同样是通过uid 找到对应的图片对象 删除数组中的这个图片对象
//参数file里面有uid，fileList5数组里面图片对象也有uid 寻找相同的uid
for (var i = 0; i < this.fileList5.length; i++) {
if(this.fileList5[i].uid == file.uid){
this.fileList5.splice(i,1)
}
}
//提交时候
this.replays.cert_file = this.fileList5
var form = new FormData
for (var i = 0; i < this.replays.cert_file.length; i++) {
form.append('cert_file[]',this.replays.cert_file[i].url)
}
//初始化时 如果是编辑页面
//将编辑带过来的form里面图片信息赋值给fileList5
for (var i = 0; i < this.form.cert_file.length; i++) {
this.fileList5.push({name:'',url:this.form.cert_file[i]})
}
Ⅲ 如何在电脑网页上上传图片（多张的）
第一，Flash插件被禁用
1. 进入IE浏览器，打开右上角齿轮工具，选择管理加载项。
2. 观察Shockwave flashObject的加载项是否被禁用，如果禁用请启动该加载项。
第二，Flash插件与IE浏览器的关联被破坏
如果以上方法不行的话，那就是Flash插件与IE浏览器的关联遭到了破坏，比如病毒，需要重新注册Flash插件与IE浏览器的关联，方法如下：
1 使用管理员账户运行CMD，在输入框中输入“regsvr32 jscripq.dll”回车(不包括双引号),点击确定
2 在输入框中输入“regsvr32 vbscripq.dll”回车(不包括双引号),点击确定；
3 64位系统输入“cd C:\Windows\Syswow64\Macromed\Flash”回车（不包括双引号），32位系统输入“cd C:\Windows\System32\Macromed\Flash”回车（不包括双引号）
4 输入“regsvr32 Flash.ocx”回车（不包括双引号） 即可完成。
Ⅳ 如何在前端用js进行多图片上传
产品提了一个需求，要求在一个html中实现多行多图片上传，原型图如下:
2.1 ：html
html页面由前端实现，此处增加<ul><li></li></ul>是为了配合图片单击放大图片功能的实现
<ul id="ul_other">
<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>
</ul>
2.2 ：js
var imgSrc_other=[];
var imgFile_other=[];
function add_file_image(id) {
var fileList =document.getElementById("file_"+id).files;// js 获取文件对象
if (verificationFile(fileList[0])){
for(var i =0;i
var imgSrcI =getObjectURL(fileList[i]);
if (id=="other"){
imgSrc_other.push(imgSrcI);
if(fileList[i].size/1024 >100) { //大于100kb，进行压缩上传
fileResizetoFile(fileList[i],0.6,function(res){
imgFile_other.push(res);
})
}else{
imgFile_other.push(res);
}
}
addNewContent(id);
}
}
//新增图片
function addNewContent(obj) {
//删除原先
$("#ul_"+obj).html("");
//判断循环新增
var text="";
if (obj=="other"){
for(var a =0;a < imgSrc_examReportCard.length;a++) {
text +='<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>';
}
}else{
console.log('脏数据');
}
var oldBox ="<li><div class=\"filediv\"><span>+</span>\n" +
"<input type=\"file\" id=\"file_"+obj+"\" class=\"file_input\" onchange=\"add_file_image('"+obj+"')\">\n" +
"</div></li>";
$("#ul_"+obj).html( text+localText);
}
使用formData上传
var form =document.getElementById("form_addArchive");//表单id
var formData =new FormData(form);
$.each(imgFile_other,function(i, file){
formData.append('imgFileOther', file);
});
$.ajax({
url:url,
type:'POST',
async:true,
cache:false,
contentType:false,
processData:false,
dataType:'json',
data:formData,
xhrFields:{
withCredentials:true
},
success:function(data) {
}
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
}
})
后台使用@RequestParam(value ="imgFileOther", required=false) List<MultipartFile> imgFileOther, 接受
//获取图片url以便显示
//文件格式验证
//图片压缩
Ⅳ js 前端上传多张图片
可以用webuploader插件，上传成功后，服务端返回图片地址，客户端<img>显示图片
X关闭按钮这个得自己用css样式控制，点击X后，服务端删除图片，然后前端移除该X掉的图片
Ⅵ jsp如何实现多图片一起上传
能
导包 com.jspsmart.upload.SmartUpload
mySmartUpload.initialize(pageContext);
mySmartUpload.upload();
for(int i=0;i<mySmartUpload.getFiles().getCount();i++){
com.jspsmart.upload.File myFile=mySmartUpload.getFiles().getFiles().getFile(i);
if(!myFile.isMissing()){
myFile.saveAs("c:\\"+myFile.getFileName(),mySmartUpload.SAVE_PHYSICAL);
}
}
基本上就是这意思了！ 全是手写的，不知道有没有少写什么字母
然后页面取的FILE 再不会，去查，查了也不会再说
Ⅶ 我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~
WebUploader项目，符合你的要求。
//文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');
//避免重复创建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}
$percent.css('width',percentage*100+'%');
});
//文件上传成功，给item添加成功class,用样式标记上传成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});
//文件上传失败，显示上传出错。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');
//避免重复创建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}
$error.text('上传失败');
});
//完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});
更多细节，请查看js源码。
Ⅷ 3分钟上手JS中的FileReader对象（实现上传图片预览）
详见原文：
https://www.cnblogs.com/LO-gin/p/6817319.html
方法一：使用js的FileReader对象
1、FileReader对象简介
检测浏览器对FileReader的支持
调用FileReader对象的方法
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，
需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
例子：
3 、使用js的FileReader对象实现上传图片时的图片预览功能
方法二：使用window.createObjectURL
Ⅸ js：点击按钮上传图片，最多能上传3张，上传第4张给出提示，js怎么写
你的上传按钮是怎么操作的？是表单的submit还是单独的按钮onclick事件调用方法？
Ⅹ 求js多张图片上传，可预览右上角带删除图标的代码
可以用dropzone.js试试，官网： http://www.dropzonejs.com/，你看看就知道了。上面有一个demo，你试试