前端如何自動分發圖片

① js 前端上傳多張圖片

1. 可以用webuploader插件，上傳成功後，服務端返回圖片地址，客戶端<img>顯示圖片

2. X關閉按鈕這個得自己用css樣式控制，點擊X後，服務端刪除圖片，然後前端移除該X掉的圖片
   

② 如何實現前端圖片拖拽

圖片上傳加拖拽插件：網頁鏈接
在vue項目入口文件index.js(main.js)，或者在調用組件中引入如下代碼：
importVueUploadDragfrom'vue-upload-drag'
Vue.use(VueUploadDrag)
根據你的需求在調用組件代碼中增加：
<template><maple-uploadv-model="fileList":config="config"

@onError="onError" @onSuccess="onSuccess"

/></template>

onError ({ err, file, uid }) { // 上傳失敗,會自動把圖片移除，建議給提示

alert('圖片上傳失敗')

console.log(err, file, uid)

},

onSuccess ({res, file, _uid , exChangeUrl, handleRemove}) { // 上傳成功，請必須接受onSuccess方法

console.log(res, file, _uid , exChangeUrl, handleRemove)

if (res.code === '0') { // res為後端返回數據，舉例而已

const {url} = res.obj

exChangeUrl(_uid, url); // url為後端返回的圖片鏈接值，uid是onSuccess傳入的

} else {

alert('圖片上傳失敗')

handleRemove(_uid) // 刪除圖片

}

}

③ 前端上傳文件的幾種方法

第一種：經典的form和input上傳。

設置form的aciton為後端頁面，enctype="multipart/form-data"，type=『post』

<formaction='http://www.ty2y.com/'enctype="multipart/form-data"type='post'><inputtype='file'><inputtype='hidden'name='userid'><inputtype='hidden'name='signature'><button>提交</button></form>

使用input選擇文件，設置好其他input的值，點擊提交，將文件數據及簽名等認證信息發送到form設置的action對應的頁面，瀏覽器也會跳轉到該頁面。觸發form表單提交數據的方式有2種，一種是在頁面上點擊button按鈕或<input
type='submit'>按鈕觸發，第二種是在js中執行form.submit()方法。

優點：使用簡單方便，兼容性好，基本所有瀏覽器都支持。

缺點：1. 提交數據後頁面會跳轉（下面會講如何禁止頁面跳轉）。

2.因為是瀏覽器發起的請求，不是一個ajax，所以前端無法知道什麼時候上傳結束。

3. form表單里發送除文件外的數據，一般是新建一個type=hidden的input，value=『需要傳的數據』，每發送一個數據就需要一個input，一旦多了就會使得dom看起來比較冗餘。

小技巧：

form表單提交數據後會自動跳轉到action指定的頁面，為了禁止頁面跳轉，可以在頁面中新建一個空的ifame，比如name='upload'，然後設置form的target="Uploader"，form有一個target的屬性，規定在何處打開action，這樣form提交數據後就會仍停留在當前頁。代碼如下：

<formaction='http://www.jshaman.com/'enctype="multipart/form-data"type='post'target="uploader1"><inputtype='file'><button>提交</button></form><ifrmaename='upload'id='uploader1'></iframe>

這樣寫的另一個好處是，可以知道什麼時候上傳完成並接收到後端的回調結果。比如上面這個例子，文件數據發送到了
'uploadFile.php'，假設該頁面處理完數據後返回了一個地址，該地址會被寫入到之前的iframe中。所以在ifame的onload函數觸發時，也就是上傳完成後，可以在iframe中讀取到後端返回的數據。

variframe=document.getElementById('upload1');
iframe.onload=function(){
vardoc=window.frames['uploader1'].document;varpre=doc.getElementsByTagName('pre');varobj=JSON.parse(pre[0].innerHTML);
}

使用這種方法時需要注意，iframe有跨域限制，創建出來的iframe的地址如果和當前頁面地址不同源，會報錯。這種情況下，建議大家在iframe的onload函數中，再次向後端請求一個介面獲取文件地址，而不是直接去iframe里讀取。或者返回這樣的數據。

<scripttype="text/javascript">window.top.window[callback](data)</script>

callback是和前端約定好的名字，上傳完成後觸發該函數並返回後端數據。

第二種：使用formData上傳。

用js構造form表單的數據，簡單高效，但最低只兼容IE10，所以需要兼容IE9的童鞋們就略過這個方法吧。

html:

<inputtype='file'>

js:

varformData=newFormData();
formData.append("userid",userid);
formData.append("signature",signature);
formData.append("file",file);//file是blob數據//再用ajax發送formData到伺服器即可，

注意一定要是post方式上傳

說明：第一種方法提到了創建多個type=『hidden』的input來發送簽名數據，這兒可以用formData.append方法來代替該操作，避免了dom中有多個input的情況出現。最後將file數據也append到formData發送到伺服器即可完成上傳。

優點：由於這種方式是ajax上傳，可以准確知道什麼時候上傳完成，也可以方便地接收到回調數據。

缺點：兼容性差

第三種：使用fileReader讀取文件數據進行上傳。

HTML5的新api，兼容性也不是特別好，只兼容到了IE10。

varfr=newFileReader();
fr.readAsDataURL(file);
fr.onload=function(event){vardata=event.target.result;//此處獲得的data是base64格式的數據img.src=data;
ajax(url,{data},function(){})
}

上面獲得的data可以用來實現圖片上傳前的本地預覽，也可以用來發送base64數據給後端然後返回該數據塊對應的地址。

優點：同第二種

缺點：一次性發送大量的base64數據會導致瀏覽器卡頓，伺服器端接收這樣的數據可能也會出現問題。

④ web前端上傳圖片的幾種方法

下面給你介紹3種web前端上傳圖片的方法：

1.表單上傳

最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。

ajax無刷新上傳

Ajax無刷新上傳的方式，本質上與表單上傳無異，只是把表單里的內容提出來採用ajax提交，並且由前端決定請求結果回傳後的展示結果。

3.各類插件上傳

當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，我們可以藉助現有插件完成。

如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等，大家可根據項目實際需求選擇適合的插件。

⑤ 前端怎麼傳圖片給後台（java）

你可以現在前台控制台列印一下base64的流，看看是否獲取圖片成功。如果成功再去後台看看獲取的文件信息，haerd中是否有數據。
然後就是你沒有後台代碼，這里也不好判斷是否是接收問題

⑥ ASP.NET 網頁聊天室，如何實現發送圖片

UEditor是由網路web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定製，注重用戶體驗等特點，開源基於MIT協議，允許自由使用和修改代碼...

⑦ Javascript如何實現上傳圖片的功能

你應該用asp、php、jsp、.net、pythone、ruby、node.js之類的東西寫一個運行在伺服器上的後台程序。

你寫的js是在瀏覽器前端運行的，瀏覽器上傳圖片是往伺服器端程序發送數據，前端運行的js是沒這個能力的。

⑧ 三層架構多個ui前端的情況下，圖片如何共享呢

有一個專門放圖片的伺服器集群。通過域名+相對URL的配置來實現共享。

比如你在網站後台上傳了一張圖片，首選它會把這張圖片的原文件保存在一個文件夾下，然後再用這張圖片生成各種大小的鎖縮略圖，打水印等。你上傳一張2MB的手機照片。它會生成40*40，100*100，320*480......，等等。圖片會用相對路徑+縮略圖尺寸的方式來命名，並以字元串形似存入資料庫。這些圖片甚至會備份幾份，以免特殊情況下緊急訪問。
在網站上就可以配置域名來訪問了。如: image1.你的域名+URL。
在APP通過HTTP訪問， image2.你的域名+URL。
在winform上可以使用bit64來顯示， image3.你的域名+URL。
有些伺服器每天接收3億張圖片上傳。硬碟大小是有限的，伺服器可以繼續加，image1,image2,image3......域名也是可以繼續解析的。

還有其他一些方案，大同小異。訪問圖片伺服器，返回圖片或bit64.

⑨ 類似於這樣的圖片展示，前端是如何做的，只截取圖片的中間部分

我不知道自己理解對沒？只是屏幕上的截屏？
窗口調整合適大小，QQ隨意打開一個對話框，用截屏按鈕。或者電腦右上角PrtSc按鈕全屏復制，打開windows附件自帶的畫圖板，粘貼，即可得到圖片，編輯之。