当前位置 : 主页 > 网络编程 > JavaScript >

HTML5拖拽上传文件部分代码

来源:互联网 收集:自由互联 发布时间:2021-06-30
HTML部分 var path = '/'; function resetUpFileTips(){$('.dragfile').removeClass('dragover');$('.dragfile h3').text('请将文件拖入此区域');$('#adUpFileModal .upload-error').addClass('hide');$('#adUpFileModal .multiple-error').addCla
HTML部分
var path = '/';
		  
function resetUpFileTips(){

	$('.dragfile').removeClass('dragover');
	$('.dragfile h3').text('请将文件拖入此区域');
	$('#adUpFileModal .upload-error').addClass('hide');
	$('#adUpFileModal .multiple-error').addClass('hide');
}

function startUpFileTips(){

	$('.dragfile').addClass('dragover');
	$('.dragfile h3').text('请将鼠标松开完成上传');
	$('#adUpFileModal .upload-error').addClass('hide');
	$('#adUpFileModal .multiple-error').addClass('hide');
}

var dragfile = document.getElementById('dragfile'); //获得到框体

dragfile.addEventListener("drop",function(e) { //拖后放开
	e.preventDefault();
	
	var fileList = e.dataTransfer.files; //获取文件对象
	if(fileList.length == 0){
	
		startUpFileTips();
		return;
	}else if(fileList.length != 1){
		
		$('#adUpFileModal .multiple-error').removeClass('hide');
	}else{
		
		var xhr = new XMLHttpRequest();
		xhr.upload.addEventListener("progress", function (e) {
			
			if (e.lengthComputable){
			
				$('#adUpFileModal .progress-bar').css('width',(e.loaded / e.total) * 100 + "%");
			}
		});
		
		xhr.open("post", "upload.html", true);
		
		xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
		//xhr.setRequestHeader("Content-Type", "multipart/form-data");
		
		var fd = new FormData();
		fd.append('file', fileList[0]);
		fd.append('path', path);
		
		
		xhr.onreadystatechange = function(data) {
			if (xhr.readyState === 4) {
				if (xhr.status == 200) {
					var json = $.parseJSON(xhr.responseText);
					
					if(json.status == 1){
						
						$('#adUpFileModal .alert-success').removeClass('hide');
						setTimeout(function(){
						
							$('#adUpFileModal .alert-success').addClass('hide');
							$('#adUpFileModal').modal('hide');
							resetUpFileTips();
							location.reload();
						},2000);
					}
				}
			}
		}
		
		xhr.send(fd);
	}
	
	
});

$('.dragfile').on({
		  
		  
	dragleave: function(e) { //拖离
		e.preventDefault();
		resetUpFileTips();
	},
	dragenter: function(e) { //拖进
		e.preventDefault();
		startUpFileTips();
	},
	dragover: function(e) { //拖来拖去
		e.preventDefault();
		startUpFileTips();
	}
});
PHP部分
function upload(){
			
    $basepath = $_SERVER["DOCUMENT_ROOT"];
    $path = XSS($_POST['path']);
    if(empty($path) && !is_numeric($path)){
        
        echo json_encode(array('status' => FALSE));
    }else{
        
        if(!empty($_FILES["file"])){
            
            $status = move_uploaded_file($_FILES["file"]["tmp_name"], $basepath . $path . '/'. $_FILES["file"]["name"]);
            
            if($status){
                
                echo json_encode(array('status' => TRUE));
            }else{
                echo json_encode(array('status' => FALSE));
            }
            
        }else{
            echo json_encode(array('status' => FALSE));
        }
    }
    
}
也许需要对后缀名文件大小进行判断,可利用以下部分代码
$extensions = array("gif", "jpeg", "jpg", "png",'bmp');
            
if(is_array($_FILES["files"]["name"])){
    foreach($_FILES["files"]["name"] as $name){

        $extension = explode(".", $name);
        $extension = strtolower(end($extension));
        
        
        if(!in_array($extension,$extensions)){
            echo json_encode(['status' => false,message=>'不允许的文件拓展名']);
            return false;
        }
    }
    
}else{
    $name = $_FILES["files"]["name"];
    
    $extension = explode(".", $name);
    $extension = strtolower(end($extension));
    
    if(!in_array($extension,$extensions)){
        echo json_encode(['status' => false,message=>'不允许的文件拓展名']);
        return false;
    }

}

if(is_array($_FILES["files"]["size"])){
    
    foreach($_FILES["files"]["size"] as $size){

        $size = $size / 1024; // kb
        if($size > 4096){
            
            echo json_encode(['status' => false,message=>'单个文件体积不能超过4MB']);
            return false;
        }
    }
    
}else{
    
    $size = $size / 1024; // kb
    if($size > 4096){
        
        echo json_encode(['status' => false,message=>'单个文件体积不能超过4MB']);
        return false;
    }
}

//  UPLOAD

$images = [];

if(is_array($_FILES["files"]["name"])){
    foreach($_FILES["files"]["name"] as $key => $name){
        
        $extension = explode(".", $name);
        $extension = end($extension);
        $name = date('YmdHis') . rand(1000,9999);
        
        $filename = $name . '.' .$extension;
        move_uploaded_file($_FILES["files"]["tmp_name"][$key], UPLOADS_PATH . '/comments/' . $filename);
        $images[$key]['image'] = 'http://img.558idc.com/uploadfile/comments/'.$filename;
    }
    
}else{
    $name = $_FILES["files"]["name"];
    
    $extension = explode(".", $name);
    $extension = end($extension);
    $name = date('YmdHis') . rand(1000,9999);
    
    $filename = $name . '.' .$extension;
    move_uploaded_file($_FILES["files"]["tmp_name"], UPLOADS_PATH . '/comments/' . $filename);
    $images[0]['image'] = 'http://img.558idc.com/uploadfile/comments/'.$filename;
    
}
网友评论