js实现图片上传

<style>   .progress {      width:9%;      height:10px;      border:1px solid #ccc;      margin-bottom:6px;      margin-left: 85px;      margin-top: -10px;      display: none;   }   .bgpro {      display:block;      width:9px;      background:#c0c4cf;      height:10px;      color:#fff;      text-align: center;      font-size: 8px;   }</style>

<div id="preview">      <img id="imghead" class="pic_show" border=0 src="__STATICS_DOMAIN__/public/boss/images/imgbg.png" width="100" height="100" />   </div>   <input type="button" value="选择logo" class="btn" />   <input type="file" onchange="previewImage(this)" class="file" name="pic"/>   <a>（请选取 100 X 100正方形logo以便达到最佳展示效果）</a></div>   <div class="progress"><span class="bgpro"></span></div>
$('input[name="pic"]').on('change',function() {        if(typeof this.files == 'undefined'){            return;        }        var img         = this.files[0];//获取图片信息        var type         = img.type;//获取图片类型，判断使用        var url         = getObjectURL(this.files[0]);//使用自定义函数，获取图片本地url        var fd             = new FormData();//实例化表单，提交数据使用        fd.append('pic',img);//将img追加进去        if(url)            $('.pic_show').attr('src',url).show();//展示图片        if(type.substr(0,5) != 'image'){//无效的类型过滤            alert('非图片类型，无法上传！');            return;        }        //开始ajax请求，后台用的tp        $.ajax({            type     : 'post',            url     : dolphin.image_upload_url,            data     : fd,            processData: false,  // tell jQuery not to process the data  ，这个是必须的，否则会报错            contentType: false,   // tell jQuery not to set contentType            dataType : 'text',            xhr : function() {//这个是重点，获取到原始的xhr对象，进而绑定upload.onprogress                var xhr     = jQuery.ajaxSettings.xhr();                xhr.upload.onprogress     = function(ev) {                    //这边开始计算百分比                    var parcent = 0;                    if(ev.lengthComputable) {                        percent = 100 * ev.loaded / ev.total;                        percent = parseFloat(percent).toFixed(2);                        $('.progress').show();                        $('.bgpro').css('width',percent + '%').html(percent + '%');                    }                };                return xhr;            },            success:function(data){                alert(data)            }        });    });//自定义获取图片路径函数function getObjectURL(file) {    var url = null ;    if (window.createObjectURL!=undefined) { // basic        url = window.createObjectURL(file) ;    } else if (window.URL!=undefined) { // mozilla(firefox)        url = window.URL.createObjectURL(file) ;    } else if (window.webkitURL!=undefined) { // webkit or chrome        url = window.webkitURL.createObjectURL(file) ;    }    return url ;}
PHP
Array  
(  
    [name] => cooff  
    [email] => qq.comaa  
)  
Array  
(  
    [file] => Array  
        (  
            [name] => yunce2.0测试.apk  
            [type] => application/vnd.android.package-archive  
            [tmp_name] => /tmp/php4Jxt0c  
            [error] => 0  
            [size] => 6476627  
        )  
  
)  
图片上传插件
function previewImage(file) {         console.log(4444)         var MAXWIDTH = 180;         var MAXHEIGHT = 180;         var div = document.getElementById('preview');         if(file.files && file.files[0]) {            div.innerHTML = '<img id=imghead>';            div.innerHTML +='<span class="closeimg" onclick="closeimg()"></span>';            var img = document.getElementById('imghead');            img.onload = function() {               console.log(5555)               var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);               img.width = rect.width;               img.height = rect.height;               //  img.style.marginLeft = rect.left+'px';               img.style.marginTop = rect.top + 'px';            }            var reader = new FileReader();            reader.onload = function(evt) {               img.src = evt.target.result;            }            reader.readAsDataURL(file.files[0]);               } else //兼容IE                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       {            var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';            file.select();            var src = document.selection.createRange().text;            div.innerHTML = '<img id=imghead>';            var img = document.getElementById('imghead');            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);            status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);            div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";         }      }      function clacImgZoomParam(maxWidth, maxHeight, width, height) {         var param = {            top: 0,            left: 0,            width: width,            height: height         };         if(width > maxWidth || height > maxHeight) {            rateWidth = width / maxWidth;            rateHeight = height / maxHeight;            if(rateWidth > rateHeight) {               param.width = maxWidth;               param.height = Math.round(height / rateWidth);            } else {               param.width = Math.round(width / rateHeight);               param.height = maxHeight;            }         }         param.left = Math.round((maxWidth - param.width) / 2);         param.top = Math.round((maxHeight - param.height) / 2);         return param;      }      function closeimg(){         $('#preview').find('img').attr('src','../public/boss/images/imgbg.png');         $('#preview').find('span').remove();         console.log($('#preview').find('input').val());            var file = document.getElementById("fileInput");            if (file.outerHTML) {                   file.outerHTML = file.outerHTML;               } else { // FF(包括3.5)                   file.value = "";               }      }