上传前如何在表单中放置“内嵌图片”？
Posted
技术标签:
【中文标题】上传前如何在表单中放置“内嵌图片”？【英文标题】：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) 并在提交表单之前显示实际图像位置？我现在到处都是。
我应该怎么做？
谢谢。
【问题讨论】：
你看过其他网站是怎么做的吗？ *** 有一种处理图像的好方法，但是在编写时，用户只能在文本区域中看到指向图像文本的链接，而不是实际的图像。 为什么会变得复杂？我不明白。可以贴一些相关的代码吗？ 我的理解是你想在上传之前预览图像......如果是你可以按照我的回答:) 不管怎样都好。我现在只想要一些功能性的东西。哪种编码方法最有效？我被困在如何将它放置在文本区域中精确指定的位置。 【参考方案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="#" />
</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 的浏览器访问时，它会变得很烦人......这仍然是一个很棒的链接，我这边投了赞成票 :)以上是关于上传前如何在表单中放置“内嵌图片”？的主要内容，如果未能解决你的问题，请参考以下文章