一、選擇文件
1、隱藏input（大部分手機瀏覽器，微信中都不可用）
通過js觸發選擇文件。js獲取選擇的文件並上傳
實現：
<html> <head> <title>上傳</title> </head> <body> <img src="xxxxxxx" id="image" onclick="select()" name="image" /> <input id="file" style="display:none" onchange="submit()" type="file" accept="image/*" /> <script>
function select(){
var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
if(ie){
document.getElementById("file").click();
}else{
var a=document.createEvent("MouseEvents");
a.initEvent("click", true, true);
document.getElementById("file").dispatchEvent(a);
}
}
function submit(){
//文件上傳
}</script> </body> </html>
2、微信中上傳文件（僅微信中可用）
1）判斷是否在微信中
Navigator 對象包含有關瀏覽器的信息。
| appCodeName | 返回瀏覽器的代碼名 |
| appName | 返回瀏覽器的名稱 |
| appVersion | 返回瀏覽器的平臺和版本信息 |
| cookieEnabled | 返回指明瀏覽器中是否啓用 cookie 的布爾值 |
| platform | 返回運行瀏覽器的操作系統平臺 |
| userAgent | 返回由客戶機發送服務器的user-agent 頭部的值 |
這裏通過返回的user-agent頭部判斷是否在微信中
function is_weixin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}2）微信jssdk配置，具體請到官網查看 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E6.AD.A5.E9.AA.A4.E4.B8.89.EF.BC.9A.E9.80.9A.E8.BF.87config.E6.8E.A5.E5.8F.A3.E6.B3.A8.E5.85.A5.E6.9D.83.E9.99.90.E9.AA.8C.E8.AF.81.E9.85.8D.E7.BD.AE
wx.config({
debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
appId: '', // 必填，公衆號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});3）頁面引用js並且配置好jssdk以後，選擇方法中加入判斷，如果在微信中
function select(){
if (is_weixin()) {
wx.chooseImage({
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: function (res) {
var localIds = res.localIds.toString(); // 返回選定照片的本地ID列表，localId可以作爲img標籤的src屬性顯示圖片
wx.uploadImage({
localId: localIds, // 需要上傳的圖片的本地ID，由chooseImage接口獲得
isShowProgressTips: 1, // 默認爲1，顯示進度提示
success: function (res) {
var serverId = res.serverId.toString(); // 返回圖片的服務器端ID
downloadimage(serverId);//下載圖片並保存到服務器中
},
fail: function (msg) {
alert(msg.errMsg);
}
});
}
});
}
}3、將input設置爲透明（未全測，uc，chrome，火狐，safari,360，微信都可用）
在大部分瀏覽器下，爲了數據安全，隱藏的input：file不能使用“click” 事件，只有當鼠標真正單擊在上傳控件的按鈕上瀏覽到的文件纔可以上傳，所以要設置input：file的透明度達到隱藏的效果。
實現：
首先將圖片和input file放至同一div下
設置input file的樣式，其中top、left和height要儘可能的覆蓋改圖片，確保用戶點擊圖片任一區域都可實現上傳文件。
假設該圖片爲高60px寬60px
<html>
<head>
<title>上傳</title>
</head>
<body>
<img src="xxxxxxx" id="image" onclick="select()" name="image" />
<input id="file" style="display: block;position: absolute;z-index: 999;top: 8;left: 8;height: 60px;width: 60px;opacity: 0;" onchange="submit()" type="file" />
<script>
function submit(){
//文件上傳
}
</script>
</body>
</html>
二、上傳圖片
1、採用Form表單提交，這裏就不再贅述
2、異步提交文件
1)ajaxfileupload介紹
語法：$.ajaxFileUpload([options])
options參數說明：
1、url 上傳處理程序地址。
2，fileElementId 需要上傳的文件域的ID，即<input type="file">的ID。
3，secureuri 是否啓用安全提交，默認爲false。
4，dataType 服務器返回的數據類型。可以爲xml,script,json,html。如果不填寫，jQuery會自動判斷。
5，success 提交成功後自動執行的處理函數，參數data就是服務器返回的數據。
6，error 提交失敗自動執行的處理函數。
7，data 自定義參數。這個東西比較有用，當有數據是與上傳的圖片相關的時候，這個東西就要用到了。
8, type 當要提交自定義參數時，這個參數要設置成post
2)實現異步上傳
<html>
<head>
<title>上傳</title>
</head>
<body>
<img src="xxxxxxx" id="image" onclick="select()" name="image" />
<input id="file" style="display: block;position: absolute;z-index: 999;top: 8;left: 8;height: 60px;width: 60px;opacity: 0;" onchange="submit()" type="file" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/ajaxfileupload.js"></script>
<script>
function Upload() {
var file = $("#image").val();
if (file == "") {
alert("請選擇一個文件，再點擊上傳。");
return;
}
$.ajaxFileUpload
({
url: 'xxxxx', //用於文件上傳的服務器端請求地址
secureuri: false, //是否需要安全協議，一般設置爲false
fileElementId: 'file', //文件上傳input的ID
dataType: 'json', //返回值類型 一般設置爲json
success: function (data, status) //服務器成功響應處理函數
{},
error: function (data, status, e)//服務器響應失敗處理函數
{
alert(e);
}
})
}
function submit(){
//文件上傳
Upload();
}
</script>
</body>
</html>