手機端上傳圖片（單圖）非插件與插件

手機端上傳圖片

方式一：非插件
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);
}

方式二：插件
插件下載:https://download.csdn.net/download/weixin_41023117/10788554
html

<div id="drop_area"></div>

JS

 var dragImgUpload = new DragImgUpload("#drop_area",{
        callback:function (files) {
            //回調函數，可以傳遞給後臺等等 
            var formData = new FormData();
           formData.append('file',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) {   
               }, 
           });
         
        }
    })