一、文件上傳的基本流程
文件上傳是通過HTTP協議來完成的。HTTP協議中定義了多個Content-Type，其中multipart/form-data是用於文件上傳的類型，它會將文件數據拆分成多個部分，每個部分相當於一個表單欄位。
對於伺服器來說，接收到一個文件上傳請求會根據Content-Type解析請求報文，得到文件內容和表單欄位的信息，將文件保存到指定的目錄中，並將上傳成功或失敗的結果返回給客戶端。
常見的文件上傳方法有三種：手動上傳、Flash上傳和Ajax上傳。其中手動上傳最基礎，Flash上傳和Ajax上傳可以在不刷新頁面的情況下實現文件上傳。
二、手動上傳文件實現
手動上傳是最基礎的文件上傳方法，它通過表單提交的方式實現。以下是一個基本的HTML表單：
<form method="POST" enctype="multipart/form-data" action="upload.php"> <input type="file" name="fileToUpload" id="fileToUpload"> <input type="submit" value="Upload Image" name="submit"> </form>
其中enctype=”multipart/form-data”表示表單數據為文件數據，而不是普通的文本數據。action指定了處理上傳文件的腳本。
在伺服器端，可以使用PHP或其他語言來處理文件上傳。以下是一個PHP處理文件上傳的代碼示例：
// 判斷是否有上傳文件
if(isset($_FILES["fileToUpload"])) {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// 判斷文件是否為圖片
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// 判斷文件是否上傳成功
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
}
該代碼首先判斷上傳的文件是否為圖片，再將上傳的文件保存在uploads文件夾中。如果上傳成功，會返回上傳成功的信息，否則會返回上傳失敗的信息。
三、Flash實現文件上傳
Flash實現文件上傳是一個比較流行的文件上傳方法，它可以在不刷新頁面的情況下實現文件上傳。以下是一個基本的Flash上傳示例：
<html>
<head>
<title>Upload file with Flash in GWT</title>
<link rel="stylesheet" type="text/css" href="upload_with_flash.css" />
<script type="text/javascript" language="javascript" src="./swfupload.js"></script>
</head>
<body>
<p>Upload file with Flash in GWT</p>
<div id="upload">
<form id="form1">
<div id="divFileProgressContainer"></div>
<div>
<input type="button" id="buttonUpload" value="Upload" />
<input type="button" id="buttonCancel" value="Cancel" />
</div>
</form>
</div>
<script type="text/javascript" language="javascript">
var swfupload;
window.onload = function(){
var settings = {
flash_url : "./swfupload.swf",
upload_url: "./UploadServlet",
file_size_limit : "100 MB",
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : "0",
file_queue_limit : "0",
custom_settings : {
progressTarget : "divFileProgressContainer",
cancelButtonId : "buttonCancel",
uploadButtonId : "buttonUpload"
},
debug: false,
button_width: 70,
button_height: 25
};
swfupload = new SWFUpload(settings);
}
</script>
</body>
</html>
這個示例使用了SWFUpload庫來實現文件上傳。在伺服器端，需要使用Java或其他語言來處理文件上傳。以下是一個Java處理文件上傳的代碼示例：
public class UploadServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String uploadFileName = "";
String newFileName = "";
String savePath = this.getServletConfig().getServletContext().getRealPath("/");
savePath = savePath + "upload/files/";
File file = new File(savePath);
if (!file.exists()) {
file.mkdirs();
}
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List items = upload.parseRequest(request);
for (Iterator i = items.iterator(); i.hasNext();) {
FileItem item = (FileItem) i.next();
if (!item.isFormField()) {
uploadFileName = item.getName();
String[] str = uploadFileName.split("\\\\");
newFileName = str[str.length - 1];
if (!newFileName.equals("") || newFileName.toLowerCase().indexOf("jpg") != -1 || newFileName.toLowerCase().indexOf("gif") != -1) {
File uploadedFile = new File(savePath, newFileName);
item.write(uploadedFile);
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
String result_str = "{\"status\":1, \"message\":\"\\u4e0a\\u4f20\\u6210\\u529f\",\"url\":\"" + newFileName + "\"}";
response.getWriter().write(result_str);
}
}
該代碼使用了ServletFileUpload庫來處理文件上傳，並將上傳的文件保存在upload/files文件夾中。如果上傳成功，會返回上傳成功的信息，否則會返回上傳失敗的信息。
四、Ajax實現文件上傳
Ajax實現文件上傳與Flash實現文件上傳類似，也可以在不刷新頁面的情況下實現文件上傳。以下是一個基本的Ajax上傳示例：
<html>
<head>
<meta charset="utf-8">
<title>文件上傳</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data">
<input name="file" type="file">
<input type="button" value="上傳" id="btn">
</form>
<div id="progress"></div>
<p>上傳成功的文件地址:</p>
<p id="url"></p>
<script>
$(function(){
var btn = $('#btn');
var progress = $('#progress');
var url = $('#url');
new AjaxUpload(btn, {
action: 'upload.php', //上傳地址
name: 'file', //文件域的名稱
onSubmit: function(file, ext){
if(!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ //上傳文件格式驗證
alert('只允許上傳圖片文件');
return false;
}
progress.show(); //上傳進度條顯示
},
onComplete: function(file, response){
progress.hide(); //上傳進度條隱藏
url.text(response); //上傳成功顯示文件地址
}
});
});
</script>
</body>
</html>
該示例使用了jQuery庫和AjaxUpload插件來實現文件上傳。在伺服器端，可以使用PHP或其他語言來處理文件上傳。以下是一個PHP處理文件上傳的代碼示例：
if($_FILES['file']['name']){
//獲取文件擴展名
$ext = explode('.',$_FILES['file']['name'])[1];
//創建新文件名
$new_filename = time().rand(100,999).'.'.$ext;
//將文件移動到指定目錄
move_uploaded_file($_FILES['file']['tmp_name'], $new_filename);
//輸出上傳成功信息
echo 'uploads/'.$new_filename;
}
該代碼首先獲取文件擴展名，再創建並移動文件到指定目錄中。如果上傳成功，會返回上傳成功的文件地址，否則會返回上傳失敗的信息。
原創文章，作者：IGLVP，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/332474.html
微信掃一掃 
支付寶掃一掃 