我希望能够在上传之前预览文件(图像).预览操作应该在浏览器中全部执行,而不使用Ajax上传图像.
我怎样才能做到这一点？
在我的HTML表单中,我输入了类型文件,例如:
<input type="file" multiple>
然后我通过单击该输入按钮选择多个文件.现在我想在提交表单之前显示所选图像的预览.如何在HTML 5中做到这一点？
我将在表单中预览图像或照片,但它不起作用,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页面？
有关于以下脚本的跟随问题和需要答案,这些脚本将在上传之前预览照片.该脚本来自http://jsbin.com/uboqu3/edit#javascript,html
1)该脚本适用于Firefox,对IE没有好处.如何让它适用于IE？
2)没有删除照片的方法.需要像预览照片上安装的小图像"X",单击此"X"将删除照片.谁能提供这个解决方案？
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>