圖片上傳的兩種方式 阿星小棧


圖片上傳是開發中常常用到的,上傳圖片一般分爲兩種,一種用form表單,另一種是ajax,下面介紹一下這兩種具體用法。

ajax上傳圖片

頁面無刷新,帶來的體驗更好。

前端代碼

<form class="" enctype="multipart/form-data">
    <div class="mui-input-row">
       <input id="file" name="file" accept="image/*" onblur="up()">
    </div>
 </form>


<script type="text/javascript">
    function up() {
        var file = document.getElementById("file");
        var form = new FormData();
        form.append("fileImg",file.files[0]);
        $.ajax({
            type: "post",
            url: "save_image",
            data: form,
            contentType: false, // 注意這裏應設爲false
            processData: false,    //false
            cache: false,    //緩存
            success: function(data){
                console.log(data);
            }
        })
    }

</script>

PHP代碼

public function save_image(Request $request)
{
    if (!empty($_FILES['fileImg'])){
       $name = $_FILES['fileImg']['name'];
    //防止重複不能上傳
    $name = uniqid().$name;
       move_uploaded_file($_FILES['fileImg']['tmp_name'],'i/new/'.$name);
    }else{
        //
    }
}

form表單上傳圖片

前端代碼

//注意 enctype="multipart/form-data"一定要寫,不然獲取不到數據。
<form action="handle.php" name="form" method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
  <input type="submit" name="submit" value="上傳" />
</form>

PHP代碼

	$file = $_FILES['file'];//得到傳輸的數據
	//得到文件名稱
	$name = $file['name'];
	$type = strtolower(substr($name,strrpos($name,'.')+1)); //得到文件類型,並且都轉化成小寫
	$allow_type = array('jpg','jpeg','gif','png'); //定義允許上傳的類型
	//判斷文件類型是否被允許上傳
	if(!in_array($type, $allow_type)){
	  //如果不被允許,則直接停止程序運行
	  return ;
	}
	//判斷是否是通過HTTP POST上傳的
	if(!is_uploaded_file($file['tmp_name'])){
	  //如果不是通過HTTP POST上傳的
	  return ;
	}
	$upload_path = "/image/i/"; //上傳文件的存放路徑
	//開始移動文件到相應的文件夾
	if(move_uploaded_file($file['tmp_name'],$upload_path.$file['name'])){
	  echo "Successfully!";
	}else{
	  echo "Failed!";
	}

當上傳圖片名中帶有中文的時候會顯示上傳失敗,可以把文件名轉換一下:

		$imgname = $_FILES['file']['name'];
        $tmp = $_FILES['file']['tmp_name'];
        $filepath = 'statics/new_web/images/';

        if(move_uploaded_file ($tmp,$filepath.iconv("UTF-8","gbk",$imgname))){
            $data['indexs_img'] = '/'.$filepath.$imgname;
        }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章