上传之前和之后如何预览图像？
我要预览表单中的图像或照片，但是它不起作用，并且HTML代码如下所示：
<form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm">
<p><label for="image">Upload Image:</label>
<input type="file" id="imageUpload"/></p>
<p><button type="submit" class="button">Save</button></p>
<div id="preview">
<img width="160px" height="120px" src="profile pic.jpg" id="thumb" />
</div>
</form>
并在下面合并了JS代码/脚本：
<script type="text/jaavascript">
$(document).ready(function(){
var thumb=$('#thumb');
new AjaxUpload('imageUpload',{
action:$('newHotnessForm').attr('action'),
name:'image',
onSubmit:function(file,extension){
$('#preview').addClass('loading');
},
onComplete:function(file,response){
thumb.load(function(){
$('#preview').removeClass('loading');
thumb.unbind();
});
thumb.attr('src',response);
}
});
});
我的表单上有两个主要问题：
1.为什么图像或图片的预览不起作用？
2.当单击保存按钮时，如何从表单粘贴照片，它将链接到我创建的另一个PHP或PHP页面？
问题答案：
试试这个：（用于预览）
<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>
<body>
<form id="form1" runat="server">
<input type="file" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
</body>
在这里工作演示>
-
问题内容： 我想先预览图像，然后再将其上传到服务器。我已经为其编写了一些代码，但是由于某种安全原因，它只能在Internet Explorer中预览，而不能在其他浏览器（如Safari，Chrome，Firefox）中预览。有什么解决方案可以在这些浏览器中预览图像吗？ 问题答案： 对于Firefox。由于安全原因，它的路径被截断了。但是，他们提供了其他方法： 以下内容适用于Internet Exp
-
问题内容： 嗨，我想知道在使用angularjs上传图像之前是否可以预览图像？我正在使用这个图书馆。https://github.com/danialfarid/angular- file-upload 谢谢。这是我的代码： template.html controller.js 问题答案： OdeToCode为这个东西发布了很棒的服务。因此，通过此简单的指令，您可以轻松预览甚至查看进度栏： 它适
-
问题内容： 我希望能够在上传文件之前预览文件（图像）。预览操作应在浏览器中全部执行，而无需使用Ajax上载图像。 我怎样才能做到这一点？ 问题答案： 请看下面的示例代码：
-
问题内容： 在我的HTML表单中，我输入了类型为file的文件，例如： 然后，通过单击该输入按钮来选择多个文件。现在，我想在提交表单之前显示所选图像的预览。如何在HTML 5中做到这一点？ 问题答案： HTML5带有FileAPI规范，它使您可以创建应用程序，使用户可以在本地与文件交互；这意味着您可以加载文件并在浏览器中呈现它们，而无需实际上传文件。FileAPI的一部分是FileReader接口
-
本文向大家介绍浅谈js图片前端预览之filereader和window.URL.createObjectURL，包括了浅谈js图片前端预览之filereader和window.URL.createObjectURL的使用技巧和注意事项，需要的朋友参考一下 浅谈js图片前端预览之filereader和window.URL.createObjectURL 以上先贴出用filereader 和 URL.
-
本文向大家介绍javascript图片预览和上传（兼容IE），包括了javascript图片预览和上传（兼容IE）的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js图片预览和上传的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。