手機端上傳圖片

HTML

 <form action="" method="post" enctype="multipart/form-data">
  <div class="uploader" style="display: none;z-index: 10;margin-top: 5%;" >
    <div class="browser">
      <label for="file">
        <span>點選選擇圖片</span>
        <input type="file" name="file" id="fileloader"  accept="image/*"  /></label>
      </label>
      <p></p>
      <img src="資源路徑{$image}" class="img-responsive center-block" id="new_img" width="200px;">
    </div> 
  <input type="button"   value="取消上傳"    class="btn btn-info btn-primary" onclick="cancle()"  />
  <input type="button" name="submit" value="上傳圖片" id="fileupload"  class="btn btn-info btn-primary" />
  <p></p>
  </div>
</form> 
 

CSS

.uploader
{
	/*border: 2px dotted #A5A5C7;*/ 
	border: 1px dotted #A5A5C7; 
	width: 100%;
	color: #92AAB0;
	text-align: center;
	vertical-align: middle;
	padding: 0px 0px;
	margin-bottom: 10px;
	font-size: 200%;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.uploader div {
	font-size: 50%;
	font-weight: bold;
	color: #C0C0C0;
	padding: 5px;
}

.uploader div.browser label {
	background-color: #5a7bc2;
	color: white;
	padding: 6px 0px;
	font-size: 100%;
	font-weight: bold;
	cursor: pointer;
	border-radius: 2px;
	position: relative;
	overflow: hidden;
	display: block;
	width: 260px;
	margin: 0px auto 0px auto;

	box-shadow: 2px 2px 2px #888888;
}

.uploader div.browser span {
	cursor: pointer;
}


.uploader div.browser input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	height: 130px;
	border: solid transparent;
	border-width: 0 0 100px 200px;
	opacity: .0;
	filter: alpha(opacity= 0);
	-o-transform: translate(250px,-50px) scale(1);
	-moz-transform: translate(-300px,0) scale(4);
	direction: ltr;
	cursor: pointer;
}

.uploader div.browser label:hover {
	background-color: #427fed;
}
 

JS

$(function(){
    $('#fileupload').click(function () {
    //獲取上傳檔案的相關資訊，得到的資料是陣列格式  
        var formData = new FormData($('form')[0]);
        formData.append('file',$(':file')[0].files[0]);
         $.ajax({
             url: " ",//傳向後臺伺服器檔案
             type: 'post',    //傳遞方法
             data: formData,  //傳遞的資料
             dataType : 'json',  //傳遞資料的格式
             async:false, //這是重要的一步，防止重複提交的                   
             cache: false,  //設定為false，上傳檔案不需要快取。
             contentType: false,//設定為false,因為是構造的FormData物件,所以這裡設定為false。
             processData: false,//設定為false,因為data值是FormData物件，不需要對資料做處理。
             success: function (status) {  
              if (status.status == 1) {
                  alert('上傳成功');
                  cancle();
                }else if (status.status == 0) {
                  alert('上傳失敗');
                } else if (status.status == 4) {
                  alert('請重新選擇圖片再上傳');
                } else if (status.status == 5) {
                  alert('圖片不得大於300kb');
                }else if (status.status == 6) {
                  alert('支援的圖片型別不正確');
                }
             },
            /* error: function (status) {
                console.log("上傳錯誤！" +status);
                
             },*/
         });

        //阻止繼續呼叫函式
      // return false;
    });
}); 
 <script>
    //在input file內容改變的時候觸發事件
    $('#fileloader').change(function(){
    //獲取input file的files檔案陣列;
    //$('#fileloader')獲取的是jQuery物件，.get(0)轉為原生物件;
    //這邊預設只能選一個，但是存放形式仍然是陣列，所以取第一個元素使用[0];
      var file = $('#fileloader').get(0).files[0];
    //建立用來讀取此檔案的物件
      var reader = new FileReader();
    //使用該物件讀取file檔案
      reader.readAsDataURL(file);
    //讀取檔案成功後執行的方法函式
      reader.onload=function(e){
    //讀取成功後返回的一個引數e，整個的一個進度事件
        //console.log(e);
    //選擇所要顯示圖片的img，要賦值給img的src就是e中target下result裡面
    //的base64編碼格式的地址
        $('#new_img').get(0).src = e.target.result; //選擇圖片後形成預覽效果
      }
    })
</script>
 

PHP

public function upload()
{ 
   if ($_FILES["file"]["error"] > 0)
     {
     //echo "錯誤: " . $_FILES["file"]["error"] . "<br />";
     $status['status'] = '4';
     echo json_encode($status);
     die;
     } 
   if (($_FILES["file"]["size"] / 1024) >= 300) {
       $status['status'] = '5';
       echo json_encode($status);
       die;
   }
   $type = $_FILES['file']['type']; 
   $filetype = ['image/jpg', 'image/jpeg', 'image/gif', 'image/bmp', 'image/png'];
   if (!in_array($type, $filetype)) {
       $status['status'] = '6';
       echo json_encode($status);
       die;
   }

   $date = date("Y_m_d",time()); 
   $dir = "儲存路徑" . $date ; 
   $new_name = md5('mw_'. $user_id. time()) . '.png'; 
   if (!is_dir($dir)) { 
      mkdir($dir,0777);//許可權根據需求給
   }
   $status['status'] = '0';
   if (file_exists($dir . $_FILES["file"]["name"])){
     //echo $_FILES["file"]["name"] . " 檔案已經存在. ";
       $status['status'] = '0'; 
   }else{
       move_uploaded_file($_FILES["file"]["tmp_name"],$dir . '/' . $new_name);
       //echo "檔案已經被儲存到: " . $dir . '/' . $_FILES["file"]["name"];
       $status['status'] = '1'; 
       }
   }
   echo json_encode($status);
}