背景知识:
- 无刷新上传图片主要还是为了在提交表单之前进行图片的预览。用户体验相对于提交表单跳转显示图片的方式总还是要好一些的。
- 本文主要介绍三种无刷新上传图片的方式
1.使用iframe子页面的形式达到无刷新上传图片的功能。首先设置一个隐藏的iframe元素并设置其name属性为upload,接着在form表单上设置一个target属性,值为upload,需要和iframe的name属性的值保持一致,代码示例如下:
#注意设置enctype的值为multipart/form-data
<form action="index.php" target="upload" enctype="multipart/form-data" method="post">
<input name="upload" type="file">
<input type="submit"/>
</form>
<iframe name="upload" style="display:none;"></iframe>
<script>
var upload={
show:function($filename) {
//逻辑处理
}
}
</script>
接着编写index.php中图片处理的代码,与我们平常使用表单提交上传处理的逻辑一样,简单的代码示例:
<?php
$file=$_FILES['upload']
//做一些上传处理...假设$path是最后需要返回的图片路径
//注意返回的内容,我们在提交页面的底部定义了一个upload对象
//当我们处理完逻辑之后返回以下js代码将调用upload对象的show方法并将$path传入
$str="<script>window.parent.upload.show('{$name}')</script>";
echo $str;exit;
我们可以在show方法中将接受到的图片路径赋值给img元素的src,这样就能预览图片了,当然你也可以做一些自定义的处理。使用iframe有一点不好就是:当我们其他的表单元素也需要通过form提交时,这时候就会出现form的嵌套,而html中form的嵌套是不允许的。
2.使用FormData对象,FormData可以简单理解为就是一个表单对象,你可以通过append方法向FormData的实例中追加键值。下面介绍一下使用FormData对象来实现无刷新上传图片:
<input type="file" name="pic" id="logo">
<script>
$('input[name=pic]').change(function(){
that = $(this)
var form=new FormData();
$file = document.getElementById('logo')
form.append('file',$file.files[0])
$.ajax({
type:'POST',
url:'上传地址',
data:form,
contentType : false, //需要设置为false,默认会加上正确的content-type
processData : false, //需要设置为false,避免jquery对formdata对象的默认处理
mimeType:"multipart/form-data",
dataType:'json',
success:function(data){
//自己的逻辑处理
}
});
});
</script>
使用FormData对象的好处就是不像iframe那样需要依赖form表单元素,它不要input元素被form表单元素给包裹。
3.使用第三方插件,本文主要介绍uploadify的使用,官网地址。这个插件有两个版本的,一个是基于flash(免费)的,一个是基于html(收费)的。这里主要讲述免费版本falsh的使用。
<link href="uploadify/uploadify.css"/>
<script src="js/jquery.js"></script>
<script src="uploadify/jquery.uploadify.min.js"></script>
<input type='file' name='logo' id='img'/>
<div id="queue"></div>
<script>
$('#img').uploadify({
'buttonClass' : 'btn btn-blue',
'queueID' : 'queue', //设置进度条的展示位置
'buttonText': '图片上传', //用来定义按钮的文字
'swf': '/plugins/uploadify/uploadify.swf',
'method':'Post',
'uploader' : 'url地址', //上传文件的路径
'fileObjName':'img', //定义$_FILES的键,例如我这边定义为img,那么后端通过$_FILES['img']获取上传的文件
//上传成功的回调
'onUploadSuccess' : function(file, data, response) {
//如果后端返回json字符串,需要通过如下语句转成json对象
var obj = eval('(' + data + ')');
//逻辑处理
},
//上传错误的回调
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
//逻辑处理
},
});
</script>
注意在使用flash版本的uploadify时需要设置当前页面浏览器的flash可用,否则会没有效果!
具体如何设置(这里以谷歌浏览器为例):
以上就是三种无刷新上传图片的方式。