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，你試試