jq上传图片ajax提交（jquery上传图片并显示缩略图）

有3种实现方式

1. 和表单其他数据一起提交，然后接收的页面上传图片；如果表单字段多，会导致提交很慢，可能会导致程序超出执行时间，所以不提倡；
2. 通过iframe链接上传的文件，然后向父窗口input赋值；
3. 通过ajax上传图片，向文本框赋值图片地址；

2,3差不多，使用ajax页面更加整齐美观一些，这里介绍方式3也就是ajax上传图片。

要达到的效果：

1. 向input赋值，
2. 展示刚才传的图片。

图1 图片上传效果图

html代码：

<input type='file' accept="image/*" id='x_pic' class='layui-inpu' >
<button type='button' class='layui-btn submis' >上传</button>
<div><img class='x_pic'></div>
<div><input class='layui-inpu picval' /></div>

js代码：

$(document).ready(function() {
$(".submis").click(function() {
var formData = new FormData();
var picinfo= $("#x_pic").get(0).files[0];//取第一个文件
formData.append("photo",);
formData.append("projectid", 参数); //如果想传递一些其他参数这样添加
if (!picinfo) {
alert('请选择要上传的图片！');
return false;
}
$.ajax({
//ajax使用前边多级分类有介绍，这里就不再重复
$(".x_pic").attr("src", result.msg);
$(".picval").val(result.msg);
})

扩展：上传图片以后选择图片的文本框要清空

var objFile = document.getElementById( "x_pic");

objFile.outerHTML = objFile.outerHTML.replace(/(value=").+"/i, "$1"");

php后台接收文件

1、$_FILE 获取，和正常上传一样 ，参数包括name,tmp_name,size，

foreach($_FILES as $k=>$v){

$v['name'] 图片原名

$v['tmp_name'] 缓存的名称，路径

$v['size'] 大小

//这里可以进行大小格式的判断

}

2、使用move_uploaded_file($v ["tmp_name"], ROOT_PATH.$images_dir.$newname);将图片移动到指定的文件夹，由于习惯了以前版本的常量ROOT_PATH，在入口文件又定义了该常量。

3、上传图片的安全性检查：

以下方法来源网络，在此表示感谢！

针对要上传的tmp_name进行验证。

$resource = fopen($tmp_name, 'rb');
fseek($resource, "0");
$fileSize = filesize($tmp_name);
if ($fileSize > 512) { // 若文件大于521B文件取头和尾
$hexCode = bin2hex(fread($resource, "512"));
fseek($resource,$fileSize-512);
$hexCode .= bin2hex(fread($resource, 512));
}else{ // 取全部
$hexCode = bin2hex(fread($resource, $fileSize));
}
if (preg_match("/(3c25.*?28.*?29.*?253e)|(3c3f.*?28.*?29.*?3f3e)|(3C534352495054)|(2F5343524950543E)|(3C736372697074)|(2F7363726970743E)/is", $hexCode)){
$status = 1;
}else{
$status = 0;
}

匹配该图片文件（转成16进制）头尾，是否有危险字符，JavaScript php等等，如果匹配到说明图片是危险的，我们可以禁止上传。危险$status = 1;反之$status = 0;

4、如果要获取图片的宽度、高度，需要上传以后使用getimagesize()获取，图片地址需要是物理路径；

getimagesize(ROOT_PATH.$images_dir.$newname);

6、浏览图片自动上传

$(".submis").click(function() 这是上传按钮的点击触发事件，需要换成change

$("#x_pic").change(function() {
  x_pic 是上传input type=file 的id

思路扩展：上传图片之前我们是否应该判断一下是否上传过该图片，避免重复上传，占用服务器空间？我是把上传的图片信息保存到表，然后每次上传之前判断了图片name和size能取到就是已经存在。