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