一、选择文件

    1、隐藏input（大部分手机浏览器，微信中都不可用）

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

        实现：

        

上传
     
     
    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(){        //文件上传     }
 
    
     2、微信中上传文件（仅微信中可用）
 
    
        1）判断是否在微信中
 
    
        Navigator 对象包含有关浏览器的信息。
 
    
             
                返回浏览器的代码名       
       
                返回浏览器的名称       
       
                返回浏览器的平台和版本信息       
       
                返回指明浏览器中是否启用 cookie 的布尔值       
       
                返回运行浏览器的操作系统平台       
       
                返回由客户机发送服务器的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
 
    
上传
     
     
 
    
二、上传图片
 
    
    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)实现异步上传
 
    
    
 
    
上传