index.html

Ajax上传图片

Ajax上传图片

function upload(){

var form = new FormData(document.getElementById("form"));

$.ajax({

url:"upload.php",

type:"post",

data:form,

cache: false,

processData: false,

contentType: false,

success:function(data){

if (data.res == "400") {

$("#upload-result").text("上传成功");

$("#imgdiv").html("");

}else if (data.res == "403") {

$("#upload-result").text("格式不对");

}else if (data.res == "404") {

$("#upload-result").text("上传错误");

}

},

error:function(data){

alert("上传失败")

}

})

}

upload.php

header("Content-type:application/json");

//获取原始文件名

$filename = $_FILES["file"]["name"];

//获取文件后缀名

$hzm = substr($filename,strpos($filename,"."));

//设置新文件名

$newfilename = substr(str_shuffle("QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm"),26,10);

// 允许上传的图片后缀

$allowedExts = array("gif", "jpeg", "jpg", "png");

$temp = explode(".", $filename);

$extension = end($temp);

if ((($_FILES["file"]["type"] == "image/gif")

|| ($_FILES["file"]["type"] == "image/jpeg")

|| ($_FILES["file"]["type"] == "image/jpg")

|| ($_FILES["file"]["type"] == "image/pjpeg")

|| ($_FILES["file"]["type"] == "image/x-png")

|| ($_FILES["file"]["type"] == "image/png"))

&& ($_FILES["file"]["size"] < 2048000) // 小于 2000 kb

&& in_array($extension, $allowedExts))

{

if ($_FILES["file"]["error"] > 0)

{

echo "{\"res\":\"404\"}";

}

else

{

// 此处可以输出文件的详细信息

if (file_exists("upload/" . $newfilename.$hzm))

{

//

}

else

{

move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $newfilename.$hzm);

echo "{\"path\":\"$newfilename$hzm\",\"res\":\"400\"}";

}

}

}

else

{

echo "{\"res\":\"403\"}";

}

?>

请在当前目录建立upload文件夹用于存放上传后的图片

GiF Demo

Author

Name:TANKING

Date:2020-04-11

Web:LIKEYUNBA.COM

WeChat:face6009

jquery ajax 上传文件 demo,Jquery+AJAX上传文件,无刷新上传并重命名文件相关推荐

  1. jQuery+php+ajax实现无刷新上传文件功能

    2019独角兽企业重金招聘Python工程师标准>>> jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码: &l ...

  2. ajax上传文件表单,图片、文件无刷新上传,jquery.form.js的使用

    我们在进行一些web开发时,有时会需要上传文件,图片等等的功能.这篇文章记录一下我实现用ajax实现无刷新上传图片的方法. 我们先要了解一下ajax,在前后端分离的开发环境中ajax被广泛的用原来前后 ...

  3. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  4. 无刷新上传Excel后利用JQuery AJAX 显示进度条的实现方式

    1.前台上传页面代码 <divclass="clearfix mywebsite-nodata"><divid="show"><f ...

  5. ajax页面无刷新上传文件

    最近在研究struts2文件上传,感觉这块无论是做企业网站还是做系统都用的挺多的,尤其是图片上传.但是上传我们又有几种方式,一种是表单提交,一种是ajax无刷新上传. 这次我要介绍的就是struts2 ...

  6. jquery.form 和MVC4做无刷新上传DEMO

    jquery.form 和MVC4做无刷新上传DEMO HTML: <script src="~/Scripts/jquery-1.10.2.min.js"></ ...

  7. jQuery无刷新上传学习心得

    记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...

  8. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  9. Sring3MVC页面无刷新上传文件

    Sring3MVC页面无刷新上传文件 首先,这个框架是利用Ajax与Ctroller进行表单提交和数据交互的,但是Ajax是无法支持File上传的,所以在这里我使用了隐藏的Iframe来做文件上传的数 ...

  10. 文件无刷新上传(swfUpload与uploadify)

    文件无刷新上传并获取保存到服务器端的路径 遇到上传文件的问题,结合之前用到过的swfUpload,又找了一个无刷新上传文件的jquery插件uploadify,写篇博客记录一下分别介绍这两个插件的实现 ...

最新文章

  1. 微软向.NET开发者开放Windows Phone 7 Market
  2. 妹纸这套路玩的好深,吹泡泡能吹出气球来
  3. Sublime Text 3 安装Package Control及配置Python环境
  4. LabelImg 批量生成标注图片文件夹序号(起始值+终值)
  5. C0304 备份最后一天所有修改的文件
  6. 二叉树删除节点+思路分析
  7. maven 添加本地库
  8. sql空字符串判断函数_Excel数据还可这样来查询:用SQL查询输出工作表指定区域更高效!...
  9. java二进制命令_Java二进制指令代码解析
  10. EntityModelStudio系列教程
  11. EasyUI的combobox
  12. javascript:访问iframe中的js函数
  13. qt开发linux性能测试工具,基于Qt的ARM-Linux系统测试工具
  14. 在OBS中解决无法录制chrome的问题
  15. 交叉编译工具链下载地址
  16. #1778. [Usaco2010 Hol]Dotp 驱逐猪猡(高斯消元)
  17. 如何建立一个属于自己的网站(小白教程)
  18. Android:自动点击屏幕
  19. 【CF #797 Div3】A-E
  20. 图像处理冷知识——dpi和ppi

热门文章

  1. java date加一天_Java日期时间API系列15-----Jdk8中API类,java日期计算2,年月日时分秒的加减等...
  2. OpenCV 像素的读取与操作
  3. matlab persistent静态变量
  4. 设置 Linux 的 LD_LIBRARY_PATH 变量
  5. Linux系统更新最新版R语言方法
  6. mysql 逻辑备份 物理备份_数据库的逻辑备份和物理备份--非RMAN
  7. rhel6.9 yum安装mysql_在RHEL6.9上安装MySQL5.7
  8. jar包不用java命令_使不能运行的JAR文件可以使用java -jar运行
  9. diff命令两个服务器文件,linux 比较两个文件夹不同 (diff命令, md5列表)
  10. line-height 属性