Ajax 图片上传（更流畅）

您现在如何上传图片？

您选择一个文件，然后点击上传。 很简单吧？ 除了您选择图片后，就无法再看到所选内容。 文件名位于输入框的末尾，如果输入框很短，或者文件路径很深，您将看不到任何有用的信息。 您会忘记选择了什么，也不知道要上传什么。 “等等，我上传的是我自己的照片，还是其他不太专业的东西？”

让我们把它做得更好。

关键是提供一个图片预览，在用户需要提交保存之前显示。 因此，我们将放弃上传按钮，转而使用保存按钮。 现在，当用户通过文件选择输入框选择文件时，将启动一些 AJAX 操作。 图片将在服务器端处理，并在现有页面上加载缩略图。

感觉好多了吧？ 我们现在对所选图片有一个视觉表示（想象一下）。

这在更大的表单中特别有用，因为多个字段将通过单个操作提交。 它允许用户在按下保存按钮之前查看表单，并查看他们选择了哪些图片（或图片）。

如何实现

好奇如何实现吗？ 这是代码。

我们可以使用标准的 HTML 表单。 我们将包含该表单以及图片预览区域。

<div id="upload-area">
	<div id="preview">
		<img width="100px" height="100px" src="/images/icons/128px/zurb.png" id="thumb">
	</div>

	<form action="/playground/ajax_upload" id="newHotnessForm">
		<label>Upload a Picture of Yourself</label>
		<input type="file" size="20" id="imageUpload" class=" ">
		<button class="button" type="submit">Save</button>
	</form>
</div>

表单的操作应指向某个地方，无论是否存在 JavaScript，都可以处理图片上传。 您可能还需要考虑仅通过 JavaScript 追加预览标记，因为没有 JS 就无法实现。

您将需要 jQuery 和 Andrew Valums 的 AJAX Upload jQuery 插件。 将它们链接起来，确保 jQuery 首先加载。 请注意，AJAX Upload 插件需要一些配置和服务器端内容才能工作。 查看该链接以获取详细信息。

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>

以下是我们将添加的完整 JavaScript 代码。

$(document).ready(function(){

	var thumb = $('#thumb');	

	new AjaxUpload('imageUpload', {
		action: $('#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('#preview').addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('#preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});

以下是用通俗易懂的语言解释的代码

1. 将插件行为附加到文件输入框
2. 指定操作 URL，从标记中的操作 URL 中提取它
3. 当选择文件时，立即在预览区域添加一个名为 “loading” 的类。 通过 CSS，此类名将隐藏图片（例如.loading img { display: none; }并应用背景图片 (一个旋转器)
4. 在 AJAX 成功后，删除loading类，并将src属性设置为插件返回的响应 URL。

仅预览

请注意，以上代码仅处理预览功能。 文件选择输入框仍包含正确的文件路径。 因此，当用户点击 “保存” 按钮时，表单仍然需要由您为其准备的任何服务器端技术处理。 所以，您实际上将上传一次图片（用于预览），然后再次上传（以更永久的方式保存它）。

在设置/配置插件时，您将设置一个目录，用于保存上传的图片的服务器端脚本。 您可能希望将该目录放在类似于/images/temp/的位置。 这样，您就知道上传到该目录的任何内容都是临时的，可以临时清理，以保持服务器清洁。 定期清理该目录的 CRON 作业可能是个好主意。

演示

ZURB 网站上有一个可用的工作演示，其中还包含更多文字信息。 由于需要进行服务器端操作，因此遗憾的是，下载并不实用。

查看演示