<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

1. Array  
2. (  
3.     [name] => cooff  
4.     [email] => qq.comaa  
5. )  
6. Array  
7. (  
8.     [file] => Array  
9.         (  
10.             [name] => yunce2.0測試.apk  
11.             [type] => application/vnd.android.package-archive  
12.             [tmp_name] => /tmp/php4Jxt0c  
13.             [error] => 0  
14.             [size] => 6476627  
15.         )  
16. )  

圖片上傳外掛

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 = "";
               }
      }