如何更新<img>带有用户图像的标签
How to update <img> tag with user image
我正在开发一个引导程序网页,希望拍摄用户输入的图像,并以模式显示预览。模态包括用户文本,这些都很好用。
模态代码如下(直到图片):
<div class="modal modal-wide fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalTitle" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="previewModalTitle">Your Newstream Preview</h4>
</div>
<div class="modal-body">
<div id="previewNewstreamImage" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img id='previewNewstreamImageFile' src="http://CrowdNe.ws/assets/img/newstreamPosters/droneSunset.jpg" >
这个转盘正在更新哪个:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="picture here" > <div class="container"><!-- container -->
<div align="center">
<div class="findStream">
<h2 style="color:#FFFFFF;">Upload Main Image</h2>
<div align="center">
<form role="form">
<div class="form-group" style="color:#FFFFFF;"> <!--form group -->
<input type='file' id="myFile" onChange="readURL(this)" />
</div><!--/div row.newstreamImage -->
</form>
</div>
<p style="color:#FFFFFF;">Images are optional but <em>highly</em> recommended. <br>
Best image dimension is 800px by 400px, jpg or png. File sizes less than 500k.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.carousel -->
</div>
</div>
然后像这样调用JavaScript:
var picture = document.getElementById("myFile").value;
document.getElementById("previewNewstreamImageFile").src = picture;
谢谢!
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);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
归因:http://www.html5rocks.com/en/tutorials/file/dndfiles/
相关文章:
- 是否可以仅通过jQuery将图像替换为用户动态选择的另一个图像
- 如何在用户单击时创建带有弹出窗格的图像
- 如果图像标记是用javascript编写的,并且需要用户输入,那么图像不会随页面加载吗
- 有人知道有没有jquery插件可以在图像上写文本,并让用户将其放置在图像内的任何位置
- 如何在windows 8 html5现代用户界面中显示没有背景的图像
- 带图像的角度用户界面选择
- HTML - 如何在不同的用户代理中显示不同的图像
- 如何以用户友好的方式在计算机上保存从画布转换的图像
- 我在Phaser有一个项目.我想在画布上的元素上做一个用户图像编辑器
- 纯javascript的进度图像加载程序仅当用户单击提交html表单时
- 添加/到URL的末尾将用户带到随机页面,并在其他页面上剥离图像
- 压缩&调整用户上传图像的大小
- 使用Cordova contacts插件将图像保存到用户的联系人中
- 让用户手动裁剪特定大小的图像作为输出
- 显示用户's在图像地图上的位置
- 如何将SVG元素和Div放入图像中,以便用户可以下载
- 如何在PassportJS中获取Facebook用户图像
- 如何更新<img>带有用户图像的标签
- 当用户在这个工作javascript注释框中提交注释时,您将如何添加用户图像和名称
- Facebook Graph API:我想显示用户图像相册