web端文件上传技术指南

快来打我* 2023-02-16 15:24 23阅读 0赞

文件上传是web应用中经常遇到的，如果没有掌握其用法，有时会造成项目进度的拖延。笔者就遇到过，拖延了3天左右才解决，下面把一些要点、心得总结一下。

页面中--增加图片的调用按钮

页面中--调用增加图片的弹窗

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

待完善，持续改进...