使用jQuery向后台传送图片

html({{}}是Angularjs的内容):

 <div class="form-group" ng-show="image_file">
         <label class="col-md-2 control-label"><img id="preview" src="{{image}}" alt=""  name="pic" class="img-circle" width="50"/></label>
                <div class="col-md-10">
                    <input type="file" id="f">
                    <p class="help-block">可以选择jpg/gif的图片作为头像,选好后点击更新头像</p>
                    <button id="upload" class="btn btn-success btn-sm">更新头像</button>
               </div>
 </div>

效果图：

     $(function(){
                 $("#f").change(function(){
                     change();
                 });
                 $("#upload").hide();
                 $("#upload").click(function(){
                     upload();
                 })
              });
             function change() {
                  var pic = document.getElementById("preview"),
                 file = document.getElementById("f");
                 var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
                 if(ext!='png'&&ext!='jpg'&&ext!='jpeg'&&ext!='gif'){
                      alert("图片的格式必须为png、gif、jpg、jpeg格式！");
                      return;
                 }
                 image(file);
             }
 
             function image(file){
                 var file = file.files[0];
                  var reader = new FileReader();
                 reader.readAsDataURL(file);
                 reader.onload = function(e){
                     var pic = document.getElementById("preview");
                     pic.src=this.result;
                      $("#upload").show();
                 }
             }

   上边这几个函数完成的是将选择的图片显示在页面上，也就是预览

  效果图：

 

下边就是向后台上传函数了，点击更新头像

           

 function upload(){
                 var formdata = new FormData();
                  formdata.append("file",document.getElementById("preview").src);
                  formdata.append("imagename",document.getElementById("f").value);
                 $.ajax({
                     type:'POST',
                      url:'/scgi/image',
                     data:formdata,
                      success:function(){
                             alert("保存头像成功")

                             },
                    processData:false,
                     contentType:false
                   })
                  $("#upload").hide();
             }

 这个函数使用了jQuery的Ajax方法，type指定传送的方式，URL是指定要传送的后台接收程序，data是要传送的数据，success表示传送完成后执行的动作，processData：FALSE表示传送的数据格式不进行转换直接发送，也就是什么类型的都可以发送

 这里还有一个重要的因素就是FormData，要发送图片等文件需要用它，FormData.append() ,前一个元素指变量名，后一个指变量值

后台接收数据我这里用的是python，接收过来的数据格式是

-----------------------------11105315945477
Content-Disposition: form-data; name="file"

data:image/jpeg;base64,/9j/4AAQSkZJRgAB..........

后边还有很多，其中的data:image/ipeg....就是图片的编码，编码的格式是base64,这样图片就从前端传到了后台，接下来的工作就容易的多了

参考：http://jsfiddle.net/longen/Mv9vq/1/light/