上传图片预览这个出自超实用的js代码段,关于图片的处理那一章,php后台接收是网上比较少这方面的资源或者写得很复杂,这里简单记录。都是基于js
首先先调用两个文件夹animateManage.js和viewimg.js,可以在网上下载。相当好用。
关键点是FileReader这个知识点,可以读取文件的相关信息,包括路径。这是个关键点。
/*
* 调用FileReader 文件API的readAsDataURL,启动异步加载文件的数据,通过监听reade的onload事件,
* 等待数据加载完毕后,在回调函数onload事件中,通过reader的result属性即可获得图片文件的相关内容
* */
var reader = new FileReader(),
_file = this.files[0]; //读取被加载的文件对象
reader.onload = (function(file) { //监听load事件
return function() {
options.previewImgSrc.setAttribute("src", this.result);
options.previewImgSrc.style.display = "block";
};
})(_file);
reader.onerror = function(){//监听文件读取的错误处理
alert("文件读取数据出错");
}
reader.readAsDataURL(_file);//读取文件内容···
注意,这是单张图片的预览。
接下来是后台
我用的是ajax来传给后台,其实ajax网上太多资料关于传文件了,其实没那么复杂,很简洁。
关键点在FormData这个对象。#add_goods_info这个是from的id
$("#add_btn").click(function()
{
var formData = new FormData($("#add_goods_info")[0]);
$.ajax({
type: "post",
//data:$("#add_goods_info").serialize(),
data: formData,
contentType: false,
processData: false,
url:"<?php echo site_url("gallery/update");?>",
dataType:"json",
success:function(data){
alert(data);
}
})
});
php后台按正常接收即可,抄w3c的例子也可以。
if (file_exists('./uploads/source/head/'.