web端文件上传技术指南

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

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

+

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

    

      

      

        ×关闭
        
上传素材明细图片：
      
        

...		 
			 
			 
上传文件格式：图片：png、jpg、jpeg格式。
			  
        
      
  
    
 

注：输入文件组件用的是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

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

待完善，持续改进...