JQuery 上传文件并显示上传进度

上传文件&显示上传进度

• 本文使用 jQuery 异步上传文件，并使用 PHP (Magento1 & Laravel) 进行后端处理。
• 需配置文件上传参数，如 upload_max_filesize，post_max_size 等。参考文章：配置PHP上传文件大小限制
  
  

1. html：

Upload Files


	

		Upload Code
		
	

	

		Upload Type
		
			Please select upload type
			Price List
			Product Catalog
			Product Warranty Policy
			Shipment Policy
			Payment Option
		
	

    

        Browser File
    	
    		Upload File
        	
		
		
    

    

		 
		Submit
		

	    

	      

	      
0%
	    
	

2. jQuery 异步上传

	$('body').on('change', '.upload-file input[type="file"]', function(){
	  var _file = $(this).val()
	  var _text = ''
	  if (_file != ''){
	    _file = _file.split('\\')
	    _text = _file[_file.length - 1]
	  }
	  $('.upload-file .add-file .filename').text(_text)
	  $('.upload-file .message').text('')
	})
	$('body').on('change', '.upload-file select', function(){
	  $('.upload-file .message').text('')
	})
	
	// 开始上传
	$('body').on('click', '.upload-file .btn.submit', function(){
	  $('.upload-file .message').text('')
	
	  var _upload_code = $('#upload_code').val()
	  var _upload_type = $('#upload_type').val()
	  var _file = $('#file').val()
	
	  if (_upload_code == '' || _upload_type == '' || _file == '') {
	    alert('Please Entry Info')
	    return
	  }
	
	  var _form = $(this).closest('form')
	  var formData = new FormData(_form[0])
	  // console.log(formData)
	
	  $.ajax({
	    type: 'POST',
	    url: '/api/uploadFiles.php',
	    data: formData,
	    xhr: function() {
	      var myXhr = $.ajaxSettings.xhr()
	      if(myXhr.upload){
	        $('.upload-file .upload-status').addClass('active')
	        myXhr.upload.addEventListener(
	          'progress', 
	          progress,   // 用于显示上传进度
	          false)
	      }
	      return myXhr
	    },
	    cache:false,
	    contentType: false,
	    processData: false,
	  }).done(function(response){
	      $('.upload-file .message').text($.parseJSON(response).message)
	  })
	})
	
	// 用于显示上传进度
	function progress(e){
	  if(e.lengthComputable){
	    var max = e.total
	    var current = e.loaded
	    var Percentage = (current * 100)/max
	    // console.log(Percentage)
	    $('.upload-status .uploaded').css('width', Percentage + '%')
	    $('.upload-status .upload-progress span').text(Percentage.toFixed(2))
	    if (Percentage >= 100) {
	      $('.upload-file .upload-status').removeClass('active')
	      $('.upload-status .uploaded').css('width', 0)
	      $('.upload-status .upload-progress span').text(0)
	    }
	  }
	}

3. 后端处理

• Magento

    // $_params = file_get_contents("php://input");
    // $_params = json_decode($_params, true);
    // if(!isset($_params['token']) || $_params['token'] != '8jhdy29kdj67hd'){
    //   return false;
    // }
  
    error_reporting(E_ALL | E_STRICT);
    define('MAGENTO_ROOT', '../');
  
    $_mage_file = MAGENTO_ROOT . '/app/Mage.php';
    require_once $_mage_file;
    umask(0);
    Mage::app()->setCurrentStore(Mage_Core_Model_App::ADMIN_STORE_ID);
  
    require_once('config.php');
    $result = false;
    if (isset($_FILES['file']) && file_exists($_FILES['file']['tmp_name'])) {
        $uploader = new Varien_File_Uploader('file');
        $uploader->setAllowedExtensions(array('pdf', 'csv', 'xls', 'xlsx'));
        $uploader->setAllowRenameFiles(false);
        $path1 = Mage::getBaseDir('media') . DS . 'files' . DS;
        $path2 = '/media/files/';
        $name = $_FILES['file']['name'];
        $result = $uploader->save($path1, $name);
  
        if ($result) {
        	$name = $_POST['upload_type'];
        	$date = date('Y.m.d');
        	$file = $result['file'];
        	$path = $path2.$result['file'];
        	$size = ceil($result['size'] / 1024);
        	if ($size < 1024) {
        		$unit = ' KB';
        	} else {
        		$size = ceil($size / 1024);
        		$unit = ' MB';
        	}
  
    		$resource = Mage::getSingleton("core/resource");
    		$write = $resource->getConnection('core_write');
    		$table = $resource->getTableName('smallrig_files');
  
    		// $result2 = $write->insert($table, ['name' => $name, 'date' => $date, 'size' => $size.$unit, 'path' => $path]);
     		$result2 = $write->update($table, ['date' => $date, 'file' => $file, 'size' => $size.$unit, 'path' => $path], ['name=?' => $name]);
    		   
        	if ($result2) {
        		echo json_encode(['success' => true, 'message' => 'Upload Success']);
        	} else {
        		echo json_encode(['success' => false, 'message' => 'Upload failure']);
        	}
    	    
    	} else {
    	    echo json_encode(['success' => false, 'message' => 'Upload failure']);
    	}
    } else {
        echo json_encode(['success' => false, 'message' => 'Please add file']);
    }
  

• Laravel

    if ($request->hasFile('document') && $request->file('document')->isValid()) {
      $filesize = round(($request->file('document')->getClientSize() / 1024), 2);
      if ($filesize > 20480) {
        return response()->json([
            'success' => false,
            'message' => 'The file size should be within 20M',
            'data' => ''
          ]);
      }
      if (!Cache::has(session('cid').'_project_quote_id')) {
        $_project_model = new Project;
        $_create = [
          'increment_id' => '',
          'client_id' => session('cid'),
          'name' => '',
          'product_name' => '',
          'status_id' => 0,
          'order_quantity' => 0,
          'supplier_name' => '',
          'supplier_contact_name' => '',
          'supplier_contact_telephone' => '',
          'supplier_contact_email' => '',
          'supplier_address' => '',
          'supplier_city' => '',
          'supplier_region' => '',
          'supplier_country' => '',
          // 'expected_order_ready_date' => '',
        ];
        $_result = $_project_model->create($_create);
        Cache::forever(session('cid').'_project_quote_id', $_result['id']);
      }
      $project_id = Cache::get(session('cid').'_project_quote_id');
  
      $filesize = $filesize.'KB';
      $date = date('d/m/Y');
      $file = $request->file('document');
      $originName = $file->getClientOriginalName();
      $entension = $file->getClientOriginalExtension();
      $_fresult = $file->move('documents/'.session('cid').'/'.date('Y-m-d').'/project', md5(uniqid($file->getfileName(), true)).'.'.$entension);
      $documents = '/'.$_fresult->getpathName();
  
      $fileType = $entension;
      if (in_array($entension, ['doc', 'docx', 'docm', 'dotx', 'dotm']))
        $fileType = 'word';
      if (in_array($entension, ['xls', 'xlsx']))
        $fileType = 'excel';
  
      $_project_file_model = new ProjectFile;
      $_files = [
        'project_id' => $project_id,
        'filename' => $originName,
        'file_type' => $fileType,
        'date' => $date,
        'size' => $filesize,
        'path' => $documents,
      ];
      $_upload_result = $_project_file_model->create($_files);
      $project_file_id = $_upload_result['id'];
  
      return response()->json([
          'success' => true,
          'message' => 'Upload Success',
          'data' => ['project_file_id' => $project_file_id, 'fileType' => $fileType, 'documents' => $documents, 'originName' => $originName, 'date' => $date, 'filesize' => $filesize]
        ]);
    }
  

---