HTML5上传图片

一..前言

　　最近公司项目用到了input上传图片，使用ajax上传，不得不说这又是一个坑。里面主要用到了 fromdata属性。它的作用就是

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，以及需要给jquery发送

到后台的时候设置一下请求头，否则会出错。

二.html布局这没什么可说的

<body>
        <input type="file" name="oImg1" id="oImg1" value="" />
</body>

三. 重头戏在这里

<script type="text/javascript">
            $(function(){
                $("#oImg1").change(function(){var This = this;
                   uploadfile(This);
              }); 
            function uploadfile(This){  //上传照片
                console.log(This)
                var file = This.files[0];  
                //alert("文件大小:"+(file.size / 1024).toFixed(1)+"kB");  
                if (window.FileReader) {  
                    var reader = new FileReader();  
                    reader.readAsDataURL(file);  
                    //监听文件读取结束后事件  
                    reader.onloadend = function (e) {
                        console.log(e);   //这里是上传文件后 返回的对象  你想要的信息都在这里
                        var formData = new FormData();  //通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据
                        formData.append('file',file);  //
                        $.ajax({ 
                            url :"/url" , 
                            type : 'POST', 
                            data : formData,
                            // 告诉jQuery不要去处理发送的数据
                            processData : false, 
                            // 告诉jQuery不要去设置Content-Type请求头
                            contentType : false,
                            success : function(data) { 
                              //请求成功
                            }, 
                            error : function(responseStr) { 
                                console.log("error");
                            } 
                        });
                    };  
                }  
            }
            })
        </script>