php手把手教你做网站(十一)Jquery Ajax上传单张图片

2022-10-11 21:18:54 129 0
魁首哥

有3种实现方式

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

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

要达到的效果:

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

图1 图片上传效果图

html代码:

 

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能取到就是已经存在。

收藏
分享
海报
0 条评论
129
上一篇:微信小程序使用GoEasy实现websocket实时通讯 下一篇:给大家了解一下PHP下的注入的特殊性和原理

本站已关闭游客评论,请登录或者注册后再评论吧~

忘记密码?

图形验证码