web端文件上傳技術指南

         文件上傳是web應用中經常遇到的，如果沒有掌握其用法，有時會造成項目進度的拖延。筆者就遇到過，拖延了3天左右才解決，下面把一些要點、心得總結一下。

頁面中--增加圖片的調用按鈕

<div onclick="to_add_mediaDtl(id,name)" style="font-size:30px;border:1px solid gray;width:50px;">+</div>

頁面中--調用增加圖片的彈窗

<div class="modal fade" id="mediaDtlAdd_modal" >
    <div class="modal-dialog" style="">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">關閉</span></button>
        <h4 class="modal-title">上傳素材明細圖片：</h4>
      </div>
        <div class="modal-body">
...		 
			 <input id="mediaDtlAddload" name="file_mediaDtlAdd" type="file" multiple="multiple" accept=".png,.jpg,.jpeg" class="">
			 <p id="mediaTyPrompt">上傳文件格式：圖片：png、jpg、jpeg格式。</p>
			  <input name="submit_mediaDtlAdd" type="button" onclick="to_submit_mediaDtlAdd()" class="btn btn-block btn-primary"  value="提交" />
        </div>
      </div>  
    </div> 
</div>

注：輸入文件組件用的是input支持多文件上傳的 multiple="multiple"。後續處理會調用到相關的api

js腳本-提交上傳文件

//提交增加素材明細圖片
function to_submit_mediaDtlAdd(){
  var v_resid=$("#mediaDtlAdd_resid").val();
  var xhr = new XMLHttpRequest();//第一步  
  var file = document.getElementById('mediaDtlAddload').files; 
  console.log("to_submit_mediaDtlAdd.file=",file);  //console.log(file.length);  
  //新建一個FormData對象  
  var formData = new FormData();
  //追加文件數據  

  for(i=0;i<file.length;i++){    
	formData.append("file["+i+"]", file[i]); 
console.log("to_submit_mediaDtlAdd.file"+i+"=",file[i]);	
	formData.append("media_type",6);   formData.append("res_id",v_resid); 
  }
  xhr.open('POST', '/add/pic?act=add_mediaDtl'); //第二步驟  
	//發送請求  
  xhr.send(formData);  //第三步驟 
  //ajax返回  
	xhr.onreadystatechange = function(){ //第四步  
　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {  
　　　　　　console.log( xhr.responseText );
           location.reload();  
　　　　}  
　　};  
	//設置超時時間  
	xhr.timeout = 100000;  
	xhr.ontimeout = function(event){  
　　　　alert('請求超時！');  
　　}

}

 php後端腳本

//點位圖片素材明細 
if($act == 'add_mediaDtl'){
    $re['flag'] = 0;	
   $res_id=$_REQUEST['res_id']; $media_type=$_REQUEST['media_type']; 
   $target_webpath = "/attachments/".$_REQUEST['prefix']; 
   $target_path = $_SERVER['DOCUMENT_ROOT'] .$target_webpath;  

   for($i=0;$i<count($_FILES["file"]['name']);$i++){  
      //$fileNum=count($file['name']);
	   if ($file["error"] > 0)  {
		 $re['flag'] = -1;  $re['error'] ="錯誤：: " . $_FILES["file"]["error"];  echo $Json->encode($re,JSON_NUMERIC_CHECK);	exit;
	   } else{
		 $view_uuid =Common::guid(16);   
		 $filename =$_FILES["file"]['name'][$i];   $filesize=$_FILES["file"]["size"][$i];  $media_path=$_REQUEST['prefix'].$filename;
		 $media_suffix = substr($filename , strrpos($filename , "."));
		 if(!is_dir($target_path)){ mkdir(iconv("UTF-8", "GBK", $target_path),0777,true); }
		 $is_moved= move_uploaded_file($_FILES["file"]["tmp_name"][$i], $target_path.$view_uuid.$media_suffix);
		 if(!$is_moved) {$re['flag'] = -2;  $re['error'] ="文件操作錯誤." ;  echo $Json->encode($re,JSON_NUMERIC_CHECK);	exit;}
		 $data_mediaDtl = array(
				"media_type"=>$media_type, 'view_uuid'=>$view_uuid,	"create_time"=>date("Y-m-d H:i:s",$currtime),	"media_path"=>$media_path,
				"absolutelocation"=>$target_webpath.$view_uuid.$media_suffix,		"media_name"=>$filename,	"pk_user_main"=>$user['pk_user_main'],
				"media_suffix"=>$media_suffix,		"media_size"=>intval($filesize/1000),		"media_resid"=>$res_id
			);
...
	   }
   }
...
}

參考代碼

//遠程路徑，名稱，文件後綴  暫未用
function downImgRar($url,$rename,$baseUrl){
   //$baseUrl = '/temp/down/';
 $file_name = $baseUrl.$rename;//'/uploads/rar/2009323162920-維C銀翹片說明書.rar';
    $file_name = iconv("utf-8","gbk//IGNORE",$file_name); // 特別注意！特別注意！特別注意這裏，windows下必須開轉碼,不然直接文件不存

    $file_path = $_SERVER['DOCUMENT_ROOT'] . $file_name;// 比如windows下這裏我的是 "D:/web/public/uploads/rar/2009323162920-維C銀翹片說明書.rar"
    //判斷如果文件存在,則跳轉到下載路徑
    if (!file_exists($file_path)) {
      // mkdir($file_path,0777,true);// die("文件不存在!");
	  $ch = curl_init();
        $timeout = 5;
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
        $content = curl_exec($ch);
        curl_close($ch);
		$size = strlen($content);
    //文件大小
		$fp2 = @fopen($file_path, 'a');
		fwrite($fp2, $content);
		fclose($fp2);
		unset($content, $url); 
		return $file_path;
    }
	
    $fp = fopen($file_path, "r+") or die('打開文件錯誤');   //下載文件必須要將文件先打開。寫入內存
    $file_size = filesize($file_path);
    //返回的文件流
    Header("Content-type:application/octet-stream");
    //按照字節格式返回
    Header("Accept-Ranges:bytes");
    //返回文件大小
    Header("Accept-Length:" . $file_size);
    //彈出客戶端對話框，對應的文件名
    Header("Content-Disposition:attachment;filename=" . substr($file_name, strrpos($file_name, '/') + 1));
    //防止服務器瞬間壓力增大，分段讀取
    $buffer = 1024;
    while (!feof($fp)) {
        $file_data = fread($fp, $buffer);
        echo $file_data;
    }
    fclose($fp);
    return $file_path;
   // die("下載成功!");
}

待完善，持續改進...