步骤与原生JS相差无几 同样需要配合FormData使用
目录结构
一级 test
二级 imgs js(放个JQ文件即可) index.html upload.php
示例代码
HTML部分
<h2>图片上传并预览</h2>
<form action="">
<input name='icon' type="file">
</form>
<!-- src 目前还没有值 -->
<img src="" alt="">
JS部分
<script>
/* jQuery实现 异步上传文件
contentType 请求头 默认值是
setRequestHeader("Content-type","application/x-www-form-urlencoded");
false的含义是 不额外的设置头
processData
是否会转化数据
如果要发送formData 设置为false 不需要转化
*/
$(function(){
// 绑定改变事件
$('input').change(function(){
// 获取FormData jQuery中有一个 dom的伪数组
var formData = new FormData($('form')[0]);
// console.log(this);
$.ajax({
url:'./upload.php',
type:'post',
data:formData,
contentType: false,// 当有文件要上传时,此项是必须的,否则后台无法识别文件流的起始位置(详见:#1)
processData: false,// 是否序列化data属性,默认true(注意:false时type必须是post,详见:#2)
success:function(data){
console.log(data);
$('img').attr('src',data);
}
})
})
})
</script>
PHP部分
<?php
// 保存上传的 文件
move_uploaded_file($_FILES['icon']['tmp_name'],'./imgs/xxx.png');
// 返回 文件的 路径
echo './imgs/xxx.png';
?>