一、选择文件

    1、隐藏input(大部分手机浏览器,微信中都不可用)

        通过js触发选择文件。js获取选择的文件并上传

        实现:

        

<html>
<head>
<title>上传</title>
</head>
<body>
<img src="xxxxxxx" id="p_w_picpath" onclick="select()" name="p_w_picpath" />
<input id="file" style="display:none" onchange="submit()" type="file" accept="p_w_picpath/*" />
<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
                                downloadp_w_picpath(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="p_w_picpath" onclick="select()" name="p_w_picpath" />
<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="p_w_picpath" onclick="select()" name="p_w_picpath" />
<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 = $("#p_w_picpath").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>