前端多頁面如何傳圖片

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

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

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

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

1.表單上傳

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

ajax無刷新上傳

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

3.各類插件上傳

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

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

㈢ 前端批量上傳圖片後端怎麼接收

循環啊 非同步啊，直接轉換成base64傳到後台，後台循環解碼，保存在文件夾裡面不就可以了。

㈣ 前端實現多圖片上傳獲取到一個數組怎麼在後台接受這個數組

// 這是一個嵌入到網頁中動態顯示50是張圖片的java小應用程序，希望你對有幫助！
import java.awt.*;

import java.applet.*;
public class Picture extends Applet
{
Image[] theImages;
int nNum = 50;
int nNow = 0;

public void init()
{
theImages = new Image[nNum];
for(int i = 0; i < nNum ; i++)//將圖片裝入數組
theImages[i] = getImage(getDocumentBase(), "pic" + Integer.toString(i) + ".jpg");
}
public void start()
{
nNow = 0;
}
public void paint(Graphics g)
{
g.drawImage(theImages[nNow],500,500,this);
nNow++;
if(nNow>=nNum)
nNow = 0;
try
{
Thread.sleep(50);
}
catch(Exception e){showStatus(e.toString());}
repaint();
}
public void main()
{
Graphics g;
g=this.getGraphics ();
init();
start();
paint(g);

}
}

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

第一種：經典的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數據會導致瀏覽器卡頓，伺服器端接收這樣的數據可能也會出現問題。

㈥ 前端頁面間數據傳遞的問題

那就是普通的get傳值或者post傳值了，把圖片的比如資料庫id傳到B，比如a里打開B就可以是
b.xxx?pic=3,5,7,9,20

㈦ HTML 網頁中怎麼上傳圖片到某個文件夾

上傳至某個文件夾，預覽是在前端完成的
此時還沒有進行上傳操作，上傳是需要後台提供介面的
可以通過form表單上傳，後台通過php，java，asp等
接收form提交的文件存儲到文件中返迴文件的網址鏈接

㈧ js 前端上傳多張圖片

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

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

㈨ 如何上傳圖片到百度

使用網路富文本編輯器ueditor（下面簡稱ue），我不得不給它一個大大的贊。我們在網站建設、前端開發時，網站的內容管理就使用了它。對於它的多圖片上傳和附件上傳，個人感覺很好用，我就琢磨著是否可以外部調用多圖上傳和附件上傳組件為自己所用，並封裝成一個插件，節省單獨開發的成本。
有了這個想法後，著手操作，理下實現思路，得出實現的關鍵在於監聽這兩個組件在編輯器里的插入動作。打開源碼，苦心研究，皇天不負苦心人，終於摸索出解決方法，現在分享出來，給擁有同樣想法的小夥伴，為網站建設屆盡一份力。
註：本文基於UEditor1.4.3.3版本。
1、引入ue相關文件，寫好初始代碼
為了更好的封裝整一個單獨的插件，這里我們要做到示例化ue後隱藏網頁中的編輯窗口，並移除焦點。
\u003C!doctype html>
\u003Chtml lang=\"zh-cn\">
\u003Chead>
\u003Cmeta charset=\"UTF-8\">
\u003Ctitle>外部調用UEditor的多圖上傳和附件上傳\u003C/title>
\u003Cscript type=\"text/javascript\" charset=\"utf-8\" src=\"ueditor.config.js\">\u003C/script>
\u003Cscript type=\"text/javascript\" charset=\"utf-8\" src=\"ueditor.all.js\">\u003C/script>
\u003Cstyle>
ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
li{list-style-type: none;margin: 5px;padding: 0;}
\u003C/style>
\u003C/head>
\u003Cbody>
\u003Ch1>外部調用UEditor的多圖上傳和附件上傳示例\u003C/h1>
\u003Cbutton type=\"button\" id=\"j_upload_img_btn\">多圖上傳\u003C/button>
\u003Cul id=\"upload_img_wrap\">\u003C/ul>
\u003Cbutton type=\"

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

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

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

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