我有以下 html 代码来上传图片：
<input type="file" name="before" size="40">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000">
我想在后端实际处理之前显示用户上传的图像。我该怎么做？
基本上我想做的是从您计算机中的图像上传图像并显示它，以便可以使用 jCrop 对其进行裁剪，然后在后端处理图像
【问题讨论】：
【讨论】：
您需要的是HTML5 File API。看看readAsDataURL。
基本上，您需要在input[type="file"] 上捕获onchange 事件并使用FileReader 加载相关文件，然后将图像内容保存在<img href="data" /> 中。更清晰的信息here.
【讨论】：
我认为您不会在服务器上进行一些处理，因为在您提交之前您将无法看到您正在上传的文件。不过，您可以尝试通过 Ajax 做一些事情。我遇到了jQuery Form Plugin 和File Uploads example。
从网站复制粘贴：
由于无法使用浏览器的 XMLHttpRequest 对象，Form Plugin 使用隐藏的 iframe 元素 帮助完成任务。这是一种常见的技术，但它具有固有的 限制。 iframe 元素用作表单的目标 提交操作，这意味着服务器响应被写入 内嵌框架。如果响应类型是 HTML 或 XML，这很好，但是 如果响应类型是脚本或 JSON，则两者都不起作用 通常包含需要使用实体来表示的字符 在 HTML 标记中找到时的引用。
为了解决脚本和 JSON 响应的挑战，表单 插件允许将这些响应嵌入到 textarea 元素中，并且 建议您在使用这些响应类型时这样做 与文件上传结合。但请注意，如果有 表单中没有文件输入，则请求使用普通 XHR 提交 表单（不是 iframe）。这会给您的服务器代码带来负担 知道何时使用文本区域，何时不使用。如果你喜欢，你可以使用 插件的 iframe 选项强制它始终使用 iframe 模式，然后您的服务器始终可以将响应嵌入到文本区域中。
【讨论】：