一、文件上传的基本流程
文件上传是通过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;
}
该代码首先获取文件扩展名，再创建并移动文件到指定目录中。如果上传成功，会返回上传成功的文件地址，否则会返回上传失败的信息。
