上传前如何在表单中放置“内嵌图片”？答案

【问题标题】：How to place an "inline image" in form before upload?上传前如何在表单中放置“内嵌图片”？
【发布时间】：2012-03-10 14:10:52
【问题描述】：

我想让用户写一篇文章并通过它内联上传图片 (like a CMS blog post)。

编写文件上传脚本很容易。但事实证明，允许“放置内联”按钮/功能很棘手。
是否有关于如何做到这一点的教程？

我正在使用一些 JavaScript 来允许它。另外，我不确定是否应该显示内联 tmp 图像或实际上传文件 (with a separate upload button than the full form upload button) 并在提交表单之前显示实际图像位置？我现在到处都是。

我应该怎么做？

谢谢。

【问题讨论】：

你看过其他网站是怎么做的吗？ Stackoverflow 有一种处理图像的好方法，但是在编写时，用户只能在文本区域中看到指向图像文本的链接，而不是实际的图像。
为什么会变得复杂？我不明白。可以贴一些相关的代码吗？
我的理解是你想在上传之前预览图像......如果是你可以按照我的回答:)
不管怎样都好。我现在只想要一些功能性的东西。哪种编码方法最有效？我被困在如何将它放置在文本区域中精确指定的位置。

标签： php javascript jquery mysql file-upload

【解决方案1】：

使用这个 Javascript 代码：

<script type="text/javascript">
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

添加此 HTML：

<body>
    <form id="form1" runat="server">
        <input type='file' onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />
    </form>
</body>

这是预览：http://jsbin.com/uboqu3/edit#javascript,html,live

我认为它可以帮助你。

【讨论】：

您有什么要我补充的，还是有什么我不明白的？
谢谢，你能把它分解一下或者详细解释一下你在做什么吗？
正如我所说：你从哪里得到这个代码，它是如何工作的，它为什么工作，它如何回答 OP 的问题？
好的，听起来不错：|您可以在这里查看脚本，您需要的实际上在这里完成Click this active link
实际上，textareas 只包含文本，但是您可以使用样式化的 div 代替图像来重叠元素，但是您可以轻松地使用图像而不是 div。 Check out this link

【解决方案2】：

您将使用 HTML5 文件阅读器：http://dev.w3.org/2006/webapi/FileAPI/#filereader-interface

一个更好的工作示例，复制自http://www.html5rocks.com/en/tutorials/file/dndfiles/

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }
  //trigger dom change after event
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

【讨论】：

这个很酷，但是当有人从不支持 HTML5 的浏览器访问时，它会变得很烦人......这仍然是一个很棒的链接，我这边投了赞成票 :)