3

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

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

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

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

4

3 回答 3

1
  • 像往常一样保存回发文件
  • 在回发期间
    • 在页面上添加指向图像的链接
    • 将javascript添加到调用另一个页面来处理图像的“onload”
于 2011-08-15T18:27:31.327 回答
0

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

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

于 2011-08-15T18:22:43.300 回答
0

我认为您不会在服务器上进行一些处理，因为在您提交之前您将无法看到您正在上传的文件。不过，您可以尝试通过 Ajax 做一些事情。我遇到了jQuery 表单插件和文件上传示例。

从网站复制并粘贴：

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

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

于 2011-08-15T19:07:16.907 回答