android表單上傳圖片
㈠ web前端上傳圖片的幾種方法
下面給你介紹3種web前端上傳圖片的方法：
1.表單上傳
最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。
ajax無刷新上傳
Ajax無刷新上傳的方式，本質上與表單上傳無異，只是把表單里的內容提出來採用ajax提交，並且由前端決定請求結果回傳後的展示結果。
3.各類插件上傳
當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，我們可以藉助現有插件完成。
如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等，大家可根據項目實際需求選擇適合的插件。
㈡ android 文件流的方式多張圖片上傳，並多個參數
android 開發中圖片上傳是很正常的，有兩種可用的方式：
下面我們就說明一下以文件流上傳圖片的方式， 實現網路框架是Retrofit
測試上傳3張手機sd卡中的圖片，並傳人了參數EquipmentCode, Description, ReportUserCode等
其中的思路是: Post的方式，Content-Type:multipart/form-data的類型進行上傳文件的。
其中MultipartBody是RequestBody的擴展，
看看請求頭的信息, 請求中攜帶了所有信(如果介面開發人員說不能收到, 叫他自己想想，截圖給他，哈哈哈：)
上面的是上傳了3張圖片，如果一張，只要傳一個就行！
就這樣，圖片上傳的兩種方式ok拉，測試通過的，保證正確！
參考: https://www.jianshu.com/p/acfefb0a204f
㈢ 如何使用multipart/form-data格式上傳文件
在網路編程過程中需要向伺服器上傳文件。Multipart/form-data是上傳文件的一種方式。
Multipart/form-data其實就是瀏覽器用表單上傳文件的方式。最常見的情境是：在寫郵件時，向郵件後添加附件，附件通常使用表單添加，也就是用multipart/form-data格式上傳到伺服器。
表單形式上傳附件
具體的步驟是怎樣的呢？
首先，客戶端和伺服器建立連接（TCP協議）。
第二，客戶端可以向伺服器端發送數據。因為上傳文件實質上也是向伺服器端發送請求。
第三，客戶端按照符合「multipart/form-data」的格式向伺服器端發送數據。
既然Multipart/form-data格式就是瀏覽器用表單提交數據的格式，我們就來看看文件經過瀏覽器編碼後是什麼樣子。
這行指出這個請求是「multipart/form-data」格式的，且「boundary」是 「---------------------------7db15a14291cce」這個字元串。
不難想像，「boundary」是用來隔開表單中不同部分數據的。例子中的表單就有 2 部分數據，用「boundary」隔開。「boundary」一般由系統隨機產生，但也可以簡單的用「-------------」來代替。
實際上，每部分數據的開頭都是由"--" + boundary開始，而不是由 boundary 開始。仔細看才能發現下面的開頭這段字元串實際上要比 boundary 多了個 「--」
緊接著 boundary 的是該部分數據的描述。
接下來才是數據。
「GIF」gif格式圖片的文件頭，可見，unknow1.gif確實是gif格式圖片。
在請求的最後，則是 "--" + boundary + "--" 表明表單的結束。
需要注意的是，在html協議中，用 「 」 換行，而不是 「 」。
下面的代碼片斷演示如何構造multipart/form-data格式數據，並上傳圖片到伺服器。
//---------------------------------------
// this is the demo code of using multipart/form-data to upload text and photos.
// -use WinInet APIs.
//
//
// connection handlers.
//
HRESULT hr;
HINTERNET m_hOpen;
HINTERNET m_hConnect;
HINTERNET m_hRequest;
//
// make connection.
//
...
//
// form the content.
//
std::wstring strBoundary = std::wstring(L"------------------");
std::wstring wstrHeader(L"Content-Type: multipart/form-data, boundary=");
wstrHeader += strBoundary;
HttpAddRequestHeaders(m_hRequest, wstrHeader.c_str(), DWORD(wstrHeader.size()), HTTP_ADDREQ_FLAG_ADD);
//
// "std::wstring strPhotoPath" is the name of photo to upload.
//
//
// uploaded photo form-part begin.
//
std::wstring strMultipartFirst(L"--");
strMultipartFirst += strBoundary;
strMultipartFirst += L" Content-Disposition: form-data; name="pic"; filename=";
strMultipartFirst += L""" + strPhotoPath + L""";
strMultipartFirst += L" Content-Type: image/jpeg ";
//
// "std::wstring strTextContent" is the text to uploaded.
//
//
// uploaded text form-part begin.
//
std::wstring strMultipartInter(L" --");
strMultipartInter += strBoundary;
strMultipartInter += L" Content-Disposition: form-data; name="status" ";
std::wstring wstrPostDataUrlEncode(CEncodeTool::Encode_Url(strTextContent));
// add text content to send.
strMultipartInter += wstrPostDataUrlEncode;
std::wstring strMultipartEnd(L" --");
strMultipartEnd += strBoundary;
strMultipartEnd += L"-- ";
//
// open photo file.
//
// ws2s(std::wstring)
// -transform "strPhotopath" from unicode to ansi.
std::ifstream *pstdofsPicInput = new std::ifstream;
pstdofsPicInput->open((ws2s(strPhotoPath)).c_str(), std::ios::binary|std::ios::in);
pstdofsPicInput->seekg(0, std::ios::end);
int nFileSize = pstdofsPicInput->tellg();
if(nPicFileLen == 0)
{
return E_ACCESSDENIED;
}
char *pchPicFileBuf = NULL;
try
{
pchPicFileBuf = new char[nPicFileLen];
}
catch(std::bad_alloc)
{
hr = E_FAIL;
}
if(FAILED(hr))
{
return hr;
}
pstdofsPicInput->seekg(0, std::ios::beg);
pstdofsPicInput->read(pchPicFileBuf, nPicFileLen);
if(pstdofsPicInput->bad())
{
pstdofsPicInput->close();
hr = E_FAIL;
}
delete pstdofsPicInput;
if(FAILED(hr))
{
return hr;
}
// Calculate the length of data to send.
std::string straMultipartFirst = CEncodeTool::ws2s(strMultipartFirst);
std::string straMultipartInter = CEncodeTool::ws2s(strMultipartInter);
std::string straMultipartEnd = CEncodeTool::ws2s(strMultipartEnd);
int cSendBufLen = straMultipartFirst.size() + nPicFileLen + straMultipartInter.size() + straMultipartEnd.size();
// Allocate the buffer to temporary store the data to send.
PCHAR pchSendBuf = new CHAR[cSendBufLen];
memcpy(pchSendBuf, straMultipartFirst.c_str(), straMultipartFirst.size());
memcpy(pchSendBuf + straMultipartFirst.size(), (const char *)pchPicFileBuf, nPicFileLen);
memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen, straMultipartInter.c_str(), straMultipartInter.size());
memcpy(pchSendBuf + straMultipartFirst.size() + nPicFileLen + straMultipartInter.size(), straMultipartEnd.c_str(), straMultipartEnd.size());
//
// send the request data.
//
HttpSendRequest(m_hRequest, NULL, 0, (LPVOID)pchSendBuf, cSendBufLen)
㈣ 【Android開發】怎麼在ListView中做一個圖片批量上傳的隊列
先是兩個layout：
1、main.xml
復制代碼
復制代碼
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:orientation="vertical"
4 android:layout_width="fill_parent"
5 android:layout_height="fill_parent">
6 <ListView
7 android:layout_width="fill_parent"
8 android:layout_height="fill_parent"
9 android:focusable="false"
10 android:id="@+id/lvImageList" >
11 </ListView>
12 </LinearLayout>
復制代碼
復制代碼
2、listitem.xml
復制代碼
復制代碼
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:orientation="horizontal"
4 android:layout_width="fill_parent"
5 android:layout_height="?android:attr/listPreferredItemHeight">
6 <ImageView
7 android:id="@+id/itemImgImageInfo"
8 android:layout_marginTop="4dip"
9 android:layout_marginBottom="4dip"
10 android:layout_width="?android:attr/listPreferredItemHeight"
11 android:layout_height="?android:attr/listPreferredItemHeight">
12 </ImageView>
13 <TwoLineListItem xmlns:android="http://schemas.android.com/apk/res/android"
14 android:layout_width="fill_parent"
15 android:layout_height="fill_parent"
16 android:paddingLeft="4dip"
17 android:mode="twoLine">
18 <CheckedTextView
19 android:id="@+id/itemChkImageInfo"
20 android:layout_width="fill_parent"
21 android:layout_height="wrap_content"
22 android:gravity="center_vertical"
23 android:textAppearance="?android:attr/textAppearanceSmall"
24 android:checkMark="?android:attr/listChoiceIndicatorMultiple">
25 </CheckedTextView>
26 <TextView
27 android:id="@+id/itemTxtImageInfo"
28 android:layout_width="fill_parent"
29 android:layout_height="wrap_content"
30 android:gravity="center_vertical|top"
31 android:layout_marginBottom="4dip"
32 android:layout_below="@+id/itemChkImageInfo"
33 android:textAppearance="?android:attr/textAppearanceSmall">
34 </TextView>
35 </TwoLineListItem>
36 </LinearLayout>
復制代碼
復制代碼
接著是代碼：
復制代碼
復制代碼
1 package com.android.MultipleChoiceImageList;
2
3 import java.util.ArrayList;
4 import java.util.HashMap;
5 import java.util.List;
6 import java.util.Map;
7
8 import android.app.Activity;
9 import android.content.Context;
10 import android.database.Cursor;
11 import android.graphics.Bitmap;
12 import android.net.Uri;
13 import android.os.Bundle;
14 import android.provider.MediaStore;
15 import android.provider.MediaStore.Images;
16 import android.view.LayoutInflater;
17 import android.view.View;
18 import android.view.ViewGroup;
19 import android.widget.AdapterView;
20 import android.widget.CheckedTextView;
21 import android.widget.ImageView;
22 import android.widget.ListView;
23 import android.widget.SimpleAdapter;
24 import android.widget.TextView;
25 import android.widget.AdapterView.OnItemClickListener;
26
27 public class MainActivity extends Activity {
28
29 private ListView lvImageList;
30
31 private String imageID= "imageID";
32 private String imageName = "imageName";
33 private String imageInfo = "imageInfo";
34
35 private ArrayList<String> fileNames = new ArrayList<String>();
36
37 private mAdapter;
38
39 /** Called when the activity is first created. */
40 @Override
41 public void onCreate(Bundle savedInstanceState) {
42 super.onCreate(savedInstanceState);
43 setContentView(R.layout.main);
44
45 lvImageList=(ListView) this.findViewById(R.id.lvImageList);
46 lvImageList.setItemsCanFocus(false);
47 lvImageList.setOnItemClickListener(new OnItemClickListener() {
48 @Override
49 public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
50
51 CheckedTextView checkedTextView = (CheckedTextView) view.findViewById(R.id.itemChkImageInfo);
52 checkedTextView.toggle();
53 mAdapter.setCheckItem(position, checkedTextView.isChecked());
54 }
55 });
56 try{
57 String[] from = {imageID, imageName, imageInfo};
58 int[] to = {R.id.itemImgImageInfo, R.id.itemChkImageInfo, R.id.itemTxtImageInfo};
59 mAdapter = new (MainActivity.this, GetImageList(), R.layout.listitem, from, to);
60 lvImageList.setAdapter(mAdapter);
61 }
62 catch(Exception ex){
63 return;
64 }
65 }
66
67 //獲取圖片列表
68 private ArrayList<Map<String, String>> GetImageList(){
69
70 ArrayList<Map<String, String>> imageList = new ArrayList<Map<String,String>>();
71 HashMap<String, String> imageMap;
72
73 //讀取SD卡中所有圖片
74 Uri uri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
75 String[] projection = { MediaStore.Images.Media._ID, MediaStore.Images.Media.DISPLAY_NAME,MediaStore.Images.Media.DATA, MediaStore.Images.Media.SIZE};
76 String selection = MediaStore.Images.Media.MIME_TYPE + "=?";
77 String[] selectionArg ={"image/jpeg"};
78 Cursor mCursor = this.managedQuery(uri, projection, selection, selectionArg, MediaStore.Images.Media.DISPLAY_NAME);
79 imageList.clear();
80 if (mCursor != null) {
81 mCursor.moveToFirst();
82 while (mCursor.getPosition() != mCursor.getCount())
83 {
84 imageMap= new HashMap<String, String>();
85 imageMap.put(imageID, mCursor.getString(mCursor.getColumnIndex(MediaStore.Images.Media._ID)));
86 imageMap.put(imageName, mCursor.getString(mCursor.getColumnIndex(MediaStore.Images.Media.DISPLAY_NAME)));
87 imageMap.put(imageInfo, " " + (mCursor.getLong(mCursor.getColumnIndex(MediaStore.Images.Media.SIZE))/1024)+"KB");
88 imageList.add(imageMap);
89 fileNames.add(mCursor.getString(mCursor.getColumnIndex(MediaStore.Images.Media.DATA)));
90 mCursor.moveToNext();
91 }
92 mCursor.close();
93 }
94 return imageList;
95 }
96
97 //可多選圖片列表適配器
98 class extends SimpleAdapter {
99
100 private Map<Integer, Boolean> map;
101 private List<Integer> state;
102 private List<? extends Map<String, ?>> mList;
103
104 LayoutInflater mInflater;
105
106 public (Context context, List<Map<String, String>> data, int resource, String[] from, int[] to) {
107 super(context, data, resource, from, to);
108 map = new HashMap<Integer, Boolean>();
109 mInflater = LayoutInflater.from(context);
110 mList = data;
111 for(int i = 0; i < data.size(); i++) {
112 map.put(i, false);
113 }
114 state = new ArrayList<Integer>();
115 }
116
117 @Override
118 public int getCount() {
119 return mList.size();
120 }
121
122 @Override
123 public Object getItem(int position) {
124 return position;
125 }
126
127 @Override
128 public long getItemId(int position) {
129 return position;
130 }
131
132 //設置條目選中狀態
133 public void setCheckItem(int position, Boolean isChecked){
134 map.put(position, isChecked);
135 if (state.contains(position))
136 state.remove((Object)position);
137 if (isChecked){
138 state.add(position);
139 }
140 }
141
142 //獲取列表中已選中條目
143 public long[] getCheckItemIds(){
144 int count = state.size();
145 long[] ids = new long[count];
146 for (int i = 0; i < count; i++) {
147 ids[i]= (long)state.get(i);
148 }
149 return ids;
150 }
151
152 @Override
153 public View getView(int position, View convertView, ViewGroup parent) {
154 if(convertView == null) {
155 convertView = mInflater.inflate(R.layout.listitem, null);
156 }
157
158 CheckedTextView checkedTextView = (CheckedTextView) convertView.findViewById(R.id.itemChkImageInfo);
159 checkedTextView.setChecked(map.get(position));
160 checkedTextView.setText((String)mList.get(position).get(imageName));
161
162 TextView textView = (TextView) convertView.findViewById(R.id.itemTxtImageInfo);
163 textView.setText((String)mList.get(position).get(imageInfo));
164
165 //顯示圖片縮略圖
166 ImageView image = (ImageView) convertView.findViewById(R.id.itemImgImageInfo);
167 Bitmap bm = MediaStore.Images.Thumbnails.getThumbnail(getContentResolver(), Long.parseLong((String)mList.get(position).get(imageID)), Images.Thumbnails.MICRO_KIND, null);
168 image.setImageBitmap(bm);
169
170 return convertView;
171 }
172 }
173 }
㈤ Android 使用OkhttpUtils上傳圖片
IMAGE_FILE_NAME這個確定是文件路徑么？
那個其他我看不出來，我上傳圖片用的都是Xutils，你可以搜搜試試。
㈥ 圖片拍照上傳解決方案
微信內置瀏覽器，和一些主流瀏覽器支持調用攝像頭，但也有很多不支持調用攝像頭，僅支持相冊。
如果是WebView中，就需要客戶端支持了，android和ios的許可權也是問題。
formData 簡介
簡單的說就是：通過formData，我們可以用ajax方式來發送表單數據；以前上傳圖片是需要用form表單提交的。
我們知道瀏覽器默認顯示的文件上傳按鈕是很醜的，通常UI都會對上傳按鈕進行設計。有以下幾種方案來寫樣式。
弊端：
坑
通過ref獲取上傳按鈕。
ref方式
event.target方式
坑：
FileReader 簡介
通過 readAsDataURL() ，在讀取操作完成後，result屬性中將包含一個data:URL格式的字元串以表示所讀取文件的內容。
base64字元串
兼容性
我在safari中測試，發現是支持的。
URL.createObjectURL 簡介
通過URL.createObjectURL()創建一個URL對象，這個URL對象表示指定的file對象或Blob對象。
兼容性
張鑫旭的文章： HTML5 file API加canvas實現圖片前端JS壓縮並上傳
張鑫旭的文章： 理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型
使用Camera API
張鑫旭
㈦ 前端上傳文件的幾種方法
1.表單上傳
最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。
form表單上傳
表單上傳需要注意以下幾點：
(1).提供form表單，method必須是post。
(2).form表單的enctype必須是multipart/form-data。
javascript學習交流群：453833554
enctype 屬性規定在發送到伺服器之前應該如何對表單數據進行編碼。默認地，表單數據會編碼為 "application/x-www-form-urlencoded"。就是說，在發送到伺服器之前，所有字元都會進行編碼。HTML表單如何打包數據文件是由enctype這個屬性決定的。enctype有以下幾種取值：
application/x-www-form-urlencoded：在發送前編碼所有字元(默認)(空格被編碼為』+』，特殊字元被編碼為ASCII十六進制字元)。
multipart/form-data：不對字元編碼。在使用包含文件上傳控制項的表單時，必須使用該值。
text/plain：空格轉換為 「+」 加號，但不對特殊字元編碼。
默認enctype=application/x-www-form-urlencoded，所以表單的內容會按URL規則編碼，然後根據表單的提交方法：
method=』get』 編碼後的表單內容附加在請求連接後，
method=』post』 編碼後的表單內容作為post請求的正文內容。
㈧ android端 file文件上傳
我們做web開發的時候幾乎都是通過一個表單來實現上傳。並且是post的方式。而且都必須要加個參數enctype = "multipart/form-data".然後再上傳後台用各種框架里的插件之類的就可以接收了，並沒有關心過這個文件具體是怎麼傳的。現在用android開發 沒有那些框架了，所以不得不關心一下了。
其實我們這種前後台的交互是用的HTTP協議。而http協議默認是傳的字元串。所以我們上傳文件的話要加enctype = "multipart/form-data"這個參數來說明我們這傳的是文件不是字元串了。而我們做web開發的時候，瀏覽器是自動解析HTTP協議的。裡面傳的哪些東西我們不用管。只要記住幾個參數就行。而我們要上傳的文件報文是保存在請求的頭文件裡面的。下面就是上傳文件頭文件的格式：
POST/logsys/home/uploadIspeedLog!doDefault.html HTTP/1.1
Accept: text/plain, */*
Accept-Language: zh-cn
Host: 192.168.24.56
Content-Type:multipart/form-data;boundary=-----------------------------7db372eb000e2
User-Agent: WinHttpClient
Content-Length: 3693
Connection: Keep-Alive
-------------------------------7db372eb000e2
Content-Disposition: form-data; name="file"; filename="kn.jpg"
Content-Type: image/jpeg
(此處省略jpeg文件二進制數據...）
-------------------------------7db372eb000e2--
這就是Http上傳發送的文件格式。而我們要發送的時候必然要遵循這種格式來並且不能出一點差錯包括每行後面的回車，下面一段文字是網上找的感覺寫的比較精彩。（尊重原創：原文地址）
紅色字體部分就是協議的頭。給伺服器上傳數據時，並非協議頭每個欄位都得說明，其中，content-type是必須的，它包括一個類似標志性質的名為boundary的標志，它可以是隨便輸入的字元串。對後面的具體內容也是必須的。它用來分辨一段內容的開始。Content-Length: 3693 ，這里的3693是要上傳文件的總長度。綠色字體部分就是需要上傳的數據，可以是文本，也可以是圖片等。數據內容前面需要有Content-Disposition, Content-Type以及Content-Transfer-Encoding等說明欄位。最後的紫色部分就是協議的結尾了。
注意這一行：
Content-Type: multipart/form-data; boundary=---------------------------7db372eb000e2
根據 rfc1867, multipart/form-data是必須的.
---------------------------7db372eb000e2 是分隔符，分隔多個文件、表單項。其中b372eb000e2 是即時生成的一個數字，用以確保整個分隔符不會在文件或表單項的內容中出現。Form每個部分用分隔符分割，分隔符之前必須加上"--"著兩個字元(即--{boundary})才能被http協議認為是Form的分隔符，表示結束的話用在正確的分隔符後面添加"--"表示結束。
前面的 ---------------------------7d 是 IE 特有的標志,Mozila 為---------------------------71.
每個分隔的數據的都可以用Content-Type來表示下面數據的類型，可以參考rfc1341