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("下载成功!");
}

待完善，持续改进...