上传文件

[deepthan]

上传文件

html

<form method="post" enctype="multipart/form-data" class="file-form">
    <input  type='text' name='extraValue' >
    
    <div>
        <a href="javascript:;" class="file forbid-select">选择文件
            <input type="file" name="file" id="file"  >
        </a>
        <div class="file begin-up forbid-select">开始上传</div>
    </div>
</form>

如果想要把其他input值一起传过去呢？如上面的extraValue里面的值。

js

$(".begin-up").click(function () {
    let formData = new FormData($("form")[0]); // 第几个form就写其index
    $.ajax({
        url: qurl + "/wp-content/themes/owasp/upload_file.php", // 请求php文件
        data: formData, // 传递数据
        type: "POST",
        async: true,
        cache: false,
        contentType: false,
        processData: false,
        success: function (msg) {
            ...
        },
        error: function (msg) {
         ..
        },
    })
})

php

上面extraValue里面的值只要在php里面接收下即可，利用其name作为标志接收。

header("Content-Type:text/html;charset=utf-8");
$curlPost="";

if(isset($_POST['extraValue'])||!empty($_POST['extraValue'])){ // 接收其他input值
    $extraValue =  $_POST['extraValue'];
    $curlPost = $curlPost."extraValue=".urlencode($extraValue).'&';
}
$uptypes=array(  //限制上传文件类型列表
		'js', 'php'
);
$fileName=$_FILES["file"]["name"]; // 获得文件名字

function getFileExt($file_name){ // 截取.后面的内容
	while($dot = strpos($file_name, ".")){
			$file_name = substr($file_name, $dot+1);
	}
	return $file_name;
}
$nameLast= strtolower(getFileExt($fileName)); // 获取文件的格式
if(in_array($nameLast, $uptypes)){ //检查文件类型
    echo "不能上传此类型文件！";
    exit();
}
if ($_FILES["file"]["error"] > 0){
	echo "文件上传错误：" . $_FILES["file"]["error"] . "<br>";
}else{
    if (file_exists("/var/www/owasp_uploads/" . $_FILES["file"]["name"])){
    		echo $_FILES["file"]["name"] . " 文件已经存在。 "; //检测文件是否存在
	}else{
		$file_sub_path="/var/www/owasp_uploads/";   //存储地址
		// 下面把文件移动到指定位置并且执行相应的操作，因为move_uploaded_file移动文件成功则返回true失败返回false
		if(move_uploaded_file($_FILES["file"]["tmp_name"], $file_sub_path . $fileName)){
		    // 文件信息传给别人，也可以直接写在sql表里
			$type = $_FILES["file"]["type"];
			$size = $_FILES["file"]["size"];
			$curlPost = $curlPost."fileName=".urlencode($fileName).'&'
				."fileName=".urlencode($fileName).'&'
				."type=".urlencode($type).'&'
				."size=".urlencode($size);
			$url = 'http://localhost:8080/fileUpload/fileUploadList';
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_URL, $url);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, 0);
			curl_setopt($ch, CURLOPT_HEADER, 0);
			curl_setopt($ch, CURLOPT_TIMEOUT,60);
			// curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
			curl_setopt($ch,CURLOPT_POSTFIELDS, $curlPost);
			$output = curl_exec($ch);
			curl_close($ch);
		}else{
			echo '文件上传失败！';
		}
    }
}

注意事项：

• 上传文件名字出现乱码问题：
  urlencode进行转码，并且转码后的编码格式应和服务器一致。

转码
$name=iconv("UTF-8","GB2312", $_FILES["file"]["name"]);

• 文件写不进去：
  如果没有 upload 目录，你需要创建它，upload 目录权限为 777

css

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
.begin-up{
    margin-left: 43px;
    text-decoration: none;
    display: inline-block;
    margin-top: -26px;
}
.begin-up:hover{
    text-decoration: none;
    cursor: pointer;
}