JCC*_*han 22 javascript php jquery html5
我将在表单中预览图像或照片,但它不起作用,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页面？
Vij*_*dey 72
试试这个:(预览)
<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>
meVeekay的答案很好,我只是通过做两件事来使它更加即兴.
检查浏览器是否支持HTML5 FileReader().
通过检查其扩展名仅允许上传图像文件.
HTML:
<div id="wrapper">
<input id="fileUpload" type="file" />
<br />
<div id="image-holder"></div>
</div>
jQuery:
$("#fileUpload").on('change', function () {
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
var image_holder = $("#image-holder");
image_holder.empty();
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
});
有关FileReader()的详细了解
在输入type=file上添加事件onchange="preview()"
对于函数preview() 类型：
thumb.src=URL.createObjectURL(event.target.files[0]);
实例：
function preview() {
thumb.src=URL.createObjectURL(event.target.files[0]);
}<form>
<input type="file" onchange="preview()">
<img id="thumb" src="" width="150px"/>
</form>