上传图片（文件）

JS代码

 function showPic(){
            var pic = $("#pic").get(0).files[0];
            $("img").prop("src" , window.URL.createObjectURL(pic) );
            //uploadFile();
        }
        function uploadFile(){
            var pic = $("#pic").get(0).files[0];
            var formData = new FormData();
            formData.append("file" , pic);
            formData.append("file" , pic);
            formData.append("file" , pic);
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            $.ajax({
                type: "POST",
                url: "upload",
                data: formData ,
                processData : false,
//必须false才会自动加上正确的Content-Type
                contentType : false ,
                xhr: function(){
                    var xhr = $.ajaxSettings.xhr();
                    if(onprogress && xhr.upload) {
                        xhr.upload.addEventListener("progress" , onprogress, false);
                        return xhr;
                    }
                }
            });
        }
        /**
         * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
         */
        function onprogress(evt){

            var loaded = evt.loaded; //已经上传大小情况
            console.log(loaded);
            var tot = evt.total; //附件总大小
            var per = Math.floor(100*loaded/tot); //已经上传的百分比
            $("#son").html( per +"%" );
            $("#son").css("width" , per +"%");
        }
CSS 代码

#parent{550px; height:10px; border:2px solid #09F;}
#son {0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;}

html代码

<div id="parent">
    <div id="son"></div>
</div>

文件上传页面遇到的问题
1  window.URL.createObjectURL
   创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.
   objectURL = window.URL.createObjectURL(blob);
   blob参数是一个File对象或者Blob对象.
   objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.
2 prop
   prop() 方法设置或返回被选元素的属性和值。
   当该方法用于返回属性值时，则返回第一个匹配元素的值。
   当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
   注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。
   提示：如需检索 HTML 属性，请使用 attr() 方法代替。
   提示：如需移除属性，请使用 removeProp() 方法。
3  FormData
   FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。 可以去这位大神的博客仔细研究一下 http://www.cnblogs.com/hutuzhu/p/4409292.html
4 processData
  类型：Boolean
  默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。