为简单起见,也许只使用 jQuery 文件上传插件:
http://blueimp.github.io/jQuery-File-Upload/
文档和示例位于上面的链接中。以下是该网站上对该插件的描述,它将完全满足您的需求,而且还有更多功能:
文件上传小部件,具有多个文件选择、拖放支持、进度条、验证和预览图像、jQuery 音频和视频。支持跨域、分块和可恢复的文件上传和客户端图像大小调整。适用于任何支持标准 HTML 表单文件上传的服务器端平台(PHP、Python、Ruby on Rails、Java、Node.js、Go 等)。
这是使用此插件的“基本”版本的示例实现:
<input id="fileupload" type="file" name="files[]" data-url="path/upload.php" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
此示例需要服务器为每个上传的文件提供 JSON 响应,一旦文件在服务器上,您可以提供类似以下代码片段(在 PHP 中)的内容:
<?php
echo json_encode(array(array(
'name' => $image->filename,
'type' => $file->getType(),
'size' => '$file->getSize(),
'url' => $file->getUrl()
)));
?>