在上传/ POST之前显示从文件加载的图像

Question

我有以下html代码上传图片：

<input type="file" name="before"  size="40">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000">

我希望显示用户在后端实际处理之前上传的图像。我该怎么做？

基本上我想要做的是从计算机中的图像上传图像并显示它，以便可以使用jCrop进行裁剪，然后在后端处理图像

Answer 1

• 像往常一样将文件保存在帖子上
• 回发期间
  • 在页面上添加图片链接
  • 将javascript添加到“onload”，调用另一个页面来处理图像处理

Answer 2

您需要的是HTML5 File API。看看readAsDataURL。

基本上，您需要抓住onchange上的input[type="file"]事件并使用FileReader加载相关文件，然后将图片内容保存在<img href="data" />中。更清晰的信息here。

Answer 3

我认为您不会在服务器上进行某些处理，因为在您提交之前，您将无法看到要上传的文件。你可以尝试通过Ajax做一些事情。我遇到了jQuery Form Plugin和File Uploads example。

从网站复制并粘贴：

  

由于无法使用浏览器上传文件   XMLHttpRequest对象，Form Plugin使用隐藏的iframe元素   帮助完成任务。这是一种常见的技术，但它具有固有的功能   限制。 iframe元素用作表单的目标   提交操作，这意味着写入服务器响应   iframe。如果响应类型是HTML或XML，那么这很好   如果响应类型是脚本或JSON，则两者都不起作用   通常包含需要使用实体重复的字符   在HTML标记中找到引用。

     

为了解决脚本和JSON响应的挑战，请填写表格   插件允许将这些响应嵌入到textarea元素中   建议您在使用时对这些响应类型执行此操作   与文件上传相结合。但请注意，如果有的话   表单中没有文件输入，然后请求使用普通XHR提交   表格（不是iframe）。这会给您的服务器代码带来负担   知道何时使用textarea以及何时不使用。如果你愿意，你可以使用   插件的iframe选项强制它始终使用iframe   模式，然后您的服务器可以始终将响应嵌入textarea。