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請求的正文內容。
『貳』 前端分享微信怎麼記錄操作過程的
1、首先登錄微信公眾號綁定域名,選擇菜單「公眾號設置」,再選擇功能薯春設置,填寫JS介面安全世襲域名。
2、其次引入JS文件。在需要調用JS介面的頁搜手兄面引入如下JS文件。
3、然後使用wx.config方法配置。
4、最後調用你需要的API,比如,自定義分享給微信朋友或者分享給QQ好友,就調用updateAppMessageShareData。
『叄』 前端怎麼傳xml文件到
WebService中文件傳輸
WebService處理傳遞普通的信息,還可以傳輸文件,下面介紹WebService是怎麼完成文件傳輸的。
1、 首先編寫伺服器端上傳文件的WebService方法
package com.hoo.service;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.InputStream;
import javax.activation.DataHandler;
/**
* <b>function:</b>Axis WebService完成文件上傳伺服器端
* @author hoojo
* @createDate Dec 18, 2010 1:16:16 PM
* @file UploadFileService.java
* @package com.hoo.service
* @project AxisWebService
* @blog http://blog.csdn.net/IBM_hoojo
* @email [email protected]
* @version 1.0
*/
public class UploadFileService {
/**
* <b>function:</b>傳遞文件
* @author hoojo
* @createDate Dec 18, 2010 1:27:58 PM
* @param handler DataHandler這個參數必須
* @param fileName 文件名稱
* @return upload Info
*/
public String upload(DataHandler handler, String fileName) {
if (fileName != null && !"".equals(fileName)) {
File file = new File(fileName);
if (handler != null) {
InputStream is = null;
FileOutputStream fos = null;
try {
is = handler.getInputStream();
fos = new FileOutputStream(file);
byte[] buff = new byte[1024 * 8];
int len = 0;
while ((len = is.read(buff)) > 0) {
fos.write(buff, 0, len);
}
} catch(FileNotFoundException e) {
return "fileNotFound";
} catch (Exception e) {
return "upload File failure";
} finally {
try {
if (fos != null) {
fos.flush();
fos.close();
}
if (is != null) {
is.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
return "file absolute path:" + file.getAbsolutePath();
} else {
return "handler is null";
}
} else {
return "fileName is null";
}
}
}
上傳方法和我們以前在Web中上傳唯一不同的就是參數一DataHandler,可以將這類看成文件傳輸器,他可以把文件序列化。然後通過DataHandler可以得到一個輸入流InputStream,通過這個流可以讀到文件的內容。其他的操作和普通上傳類似。
2、 定製wsdd發布文件上傳的WebService服務
<?xml version="1.0" encoding="UTF-8"?>
<deployment xmlns="http://xml.apache.org/axis/wsdd/"
xmlns:java="http://xml.apache.org/axis/wsdd/providers/java">
<service name="UploadFile" provider="java:RPC">
<parameter name="className" value="com.hoo.service.UploadFileService" />
<parameter name="allowedMethods" value="*" />
<parameter name="scope" value="Session" />
<!-- 和伺服器端上傳文件的方法簽名對應,參數也對應 -->
<operation name="upload" qname="operNS:upload" xmlns:operNS="upload" returnType="rns:string"
xmlns:rns="http://www.w3.org/2001/XMLSchema">
<parameter name="handler" type="ns:DataHandler" xmlns:ns="http://www.w3.org/2001/XMLSchema"/>
<parameter name="fileName" type="ns:string" xmlns:ns="http://www.w3.org/2001/XMLSchema"/>
</operation>
<typeMapping qname="hns:DataHandler" xmlns:hns="ns:FileUploadHandler"
languageSpecificType="java:javax.activation.DataHandler"
serializer="org.apache.axis.encoding.ser." deserializer="org.apache.axis.encoding.ser." encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>
</service>
</deployment>
上面才xml節點元素在前面都見過了,說明下operation中的參數,注意要指定參數類型,特別是DataHandler的類型,然後就是typeMapping的serializer、deserializer的序列化和反序列化工廠類的配置。
3、 用dos命令發布當前WebService
C:\SoftWare\tomcat-5.0.28\tomcat-5.0.28\webapps\AxisWebService\WEB-INF>java -Djava.ext.dirs=lib org.apache.axis.client.AdminClient -lhttp://localhost:8080/AxisWebService/services/AdminService deployUpload.wsdd
發布完成後,可以通過這個地址查看uploadFile這個service了
http://localhost:8080/AxisWebService/servlet/AxisServlet
4、 編寫客戶端代碼
package com.hoo.client;
import java.rmi.RemoteException;
import javax.activation.DataHandler;
import javax.activation.FileDataSource;
import javax.xml.namespace.QName;
import javax.xml.rpc.ParameterMode;
import javax.xml.rpc.ServiceException;
import org.apache.axis.client.Call;
import org.apache.axis.client.Service;
import org.apache.axis.encoding.XMLType;
import org.apache.axis.encoding.ser.;
import org.apache.axis.encoding.ser.;
/**
* <b>function:</b>上傳文件WebService客戶端
*
* @author hoojo
* @createDate Dec 18, 2010 1:38:14 PM
* @file UploadFileClient.java
* @package com.hoo.client
* @project AxisWebService
* @blog http://blog.csdn.net/IBM_hoojo
* @email [email protected]
* @version 1.0
*/
public class UploadFileClient {
public static void main(String[] args) throws ServiceException, RemoteException {
String url = "http://localhost:8080/AxisWebService/services/UploadFile";
String fileName = "readMe.txt";
String path = System.getProperty("user.dir") + "\\WebRoot\\" + fileName;
System.out.println(path);
//這樣就相當於構造了一個帶文件路徑的File了
DataHandler handler = new DataHandler(new FileDataSource(path));
Service service = new Service();
Call call = (Call) service.createCall();
call.setTargetEndpointAddress(url);
/**
* 注冊異常類信息和序列化類 ns:FileUploadHandler 和 wsdd 配置文件中的typeMapping中的xmlns:hns="ns:FileUploadHandler" 的對應 DataHandler
* 和 wsdd 配置文件中的typeMapping中的qname="hns:DataHandler"的DataHandler對應
*/
QName qn = new QName("ns:FileUploadHandler", "DataHandler");
call.registerTypeMapping(DataHandler.class, qn,
.class,
.class);
call.setOperationName(new QName(url, "upload"));
//設置方法形參,注意的是參數1的type的DataHandler類型的,和上面的qn的類型是一樣的
call.addParameter("handler", qn, ParameterMode.IN);
call.addParameter("fileName", XMLType.XSD_STRING, ParameterMode.IN);
//設置返回值類型,下面2種方法都可以
call.setReturnClass(String.class);
//call.setReturnType(XMLType.XSD_STRING);
String result = (String) call.invoke(new Object[] { handler, "remote_server_readMe.txt" });
System.out.println(result);
}
}
至此,文件傳輸就完成了。怎麼樣,還不錯吧!
如果你用myEclipse進行開發的話,運行時可能會出現以下的錯誤:
Exception in thread "main" java.lang.NoClassDefFoundError: com/sun/mail/util/LineInputStream
原因是jar包版本不統一,解決方法如下:
刪除Java EE 5 Libraries/javaee.jar/mail里的包有東西.
具體方法如下:
用rar打開X:/Program Files/MyEclipse 6.0/myeclipse/eclipse/plugins/com.genuitec.eclipse.j2eedt.core_6.0.1.zmyeclipse601200710/data/libraryset/EE_5/javaee.jar,然後刪除mail,一切就ok了.
『肆』 java web前端上傳文件到後台常用的幾種方式
1、使用form表單提交
但是這里要記得添加enctype屬性,這個屬性是指定form表單在向伺服器提交之前,對表單數據如何進行編碼。 文件域中的name="file"屬性的值,需要和後台接收的對象名一致,不然接收不到。
2、使用ajax提交文件
使用ajax提交首先引入jquery-form.js文件才能實現,接著使用上面的html代碼,加入以js則可以實現ajax提交文件。
3、使用FormData對象
4、後台接收文件,框架採用的Spring Boot 微服務框架,因為該框架搭建很方便所以採用這個框架寫例子。
『伍』 web前端param怎麼上傳文件
1 首先有一個正確的
2 其次input type需要為"file"
3 如果不需要設置文件類型和大小的話,跟傳一組數據是一樣的格式寫介面代碼就行
『陸』 前端怎麼發送一個存儲.xls文件的路徑給後台
用AJAX發送
『柒』 .NET 前端大文件上傳如何實現
想要想上傳大文件,必須在web.config文件中進行配置。
在<system.web>節點中添加如下代碼即可:
<httpRuntime maxRequestLength="2097151"/>
這個代碼就是表示設置最大請求值,上傳文件也就相當於請求。maxRequestLength單位為KB,最大值為:2097151.如果不設置,默認為4096 KB (4 MB)。
也就是說上傳的文件最大可以上傳2G以內的文件。
一般沒有配置的話,默認只能上傳4M以內的文件。配置了的話就可以上傳更大的文件。
『捌』 nodejs(express)項目實現微信分享
暨官網實現後移動端需支持微信分享功能,且用nodejs實現後台介面
以前做過微信分享,但也僅限於前端,回憶起來當時沒啥大坑,介面報錯或者有啥問題基本當時都反饋給後台同學,最後都完美解決了。
而這次從微信公眾號申請,公眾號平台配置,node實現後台介面,前端實現分享功能一路開飛(抱個頭想會兒)
起初覺得不難,很多人都已經做過了。node介面更好實現。而事實是猜對了結尾卻猜錯了開場。
好了,下來一步一步記錄一下我遇到的各種坑罩絕,大部分坑都還是在微信公眾平台的配置上。其實還是沒有花時間仔細閱讀開發者文檔。建議要做的同學做之前還是好好研讀一下開發物肆姿者文檔。
在公眾號平台-設置-公眾號設置-功能設置,配置JS介面安全域名雹數
這樣,txt文件就能訪問到了。
平台-開發-基本配置-公眾號開發信息-IP白名單里配置白名單
ip白名單配置的是你項目運行的伺服器對應的外網地址,比如我做的時候問我們後台同事,他說網路里搜IP地址,出來的就是公司的外網地址,然後配上去後來介面調試根本就報無效ip地址嘛。後來找了運維要了xxx.cn對應的外網地址,介面調試才通過。
平台-開發-基本配置-伺服器配置
伺服器地址填的是你後台寫的供微信伺服器調用的介面,用來校驗token
第二個欄位token的配置,任意寫的,但是必須保證跟你供微信調用的介面里寫的token要一致。
供微信調用的介面:
其他欄位配置沒什麼要特別說的了。
入口文件,index.js:
這個入口文件裡面很多配置沒用nuxt的用不到。
路由/router/weChart.js
/service/wxShare.js
api/getWx.js
vue組件頁面引用
微信分享前後端實現基本就這樣,自己配置過程中如有問題還得繼續趟。
『玖』 前端文件上傳多種方式
前端上傳文件【包含圖片、視頻等資源文件】是相當常見的場景,作為一名前端開發人員你會遇到後端接收文件的多種方式,以及前端不同場景下的生成的不同文件上傳格式。
1、表單上傳方式【最場景、最簡單的方式】
上面的是挺簡單的,but 刷新了,這個體驗大多數場景中讓人接受不了,最簡單的處理方式設置submit 返回 false;
2、表單升級版 【formData】
有些場景中我們不一樣會使用form,或者說不想用,那麼formData就是一個很好的選擇了,首先刷新問題是肯定沒有了,而且看上逼格更高。
3、formData 上傳 blob 圖片
4、formData 上傳 base64 圖片; // 一般是把base64轉blob在上傳
其他方式歡迎留言探討, 上面大部分寫法是直接用vue的方式,其實都差不多哈。
『拾』 詳解前端文件上傳
首先文件上傳首先想到的發post,當然還有其他的上傳協議,我們這里只介紹發post。
post支持四種content-type:
Content-Type 被指定為 application/x-www-form-urlencoded;其次,提交的數據按照 key1=val1&key2=val2 的方式進行編碼,key 和 val 都進行了 URL 轉碼。
首先生成了一個 boundary 用於分割不同的欄位,為了避免與正文內容重復,boundary 很長很復雜。然後 Content-Type 里指明了數據是以 mutipart/form-data 來編碼,本次請求的 boundary 是什麼內容。消息主體里按照欄位個數又分為多個結構類似的部分,每部分都是以 --boundary 開始,緊接著內容描述信息,然後是回車,最後是欄位具體內容(文本或二進制)。如果傳輸的是文件,還要包含文件名和文件類型信息。消息主體最後以 --boundary-- 標示結束。
RFC1867
application/json這個Content-Type都比較熟悉,當然也可以把json放到formData中;
RFC4657
參見RFC,也比較常見。
XML-RFC
在HTML中要有一個包含了文件輸入框的form元素,表單里元素的name一定要寫,最終形成formData時,是以name作為key值
如果直接在form里寫action的話,會刷新表單,同步請求。所以用發送非同步post請求方式。
你還可以不藉助HTML表單,直接向FormData對象中添加一個File對象或者一個Blob對象:
你還可以使用jQuery來發送FormData,但必須要正確的設置相關選項:
MDN:使用FormData