一、选择文件
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>
本文出自 “大包子” 博客，请务必保留此出处http://dabaozi.blog.51cto.com/8032088/1690146
原文地址：http://dabaozi.blog.51cto.com/8032088/1690146
