jquery ajax 上传文件 demo,Jquery+AJAX上传文件,无刷新上传并重命名文件
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上传文件,无刷新上传并重命名文件相关推荐
- jQuery+php+ajax实现无刷新上传文件功能
2019独角兽企业重金招聘Python工程师标准>>> jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码: &l ...
- ajax上传文件表单,图片、文件无刷新上传,jquery.form.js的使用
我们在进行一些web开发时,有时会需要上传文件,图片等等的功能.这篇文章记录一下我实现用ajax实现无刷新上传图片的方法. 我们先要了解一下ajax,在前后端分离的开发环境中ajax被广泛的用原来前后 ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- 无刷新上传Excel后利用JQuery AJAX 显示进度条的实现方式
1.前台上传页面代码 <divclass="clearfix mywebsite-nodata"><divid="show"><f ...
- ajax页面无刷新上传文件
最近在研究struts2文件上传,感觉这块无论是做企业网站还是做系统都用的挺多的,尤其是图片上传.但是上传我们又有几种方式,一种是表单提交,一种是ajax无刷新上传. 这次我要介绍的就是struts2 ...
- jquery.form 和MVC4做无刷新上传DEMO
jquery.form 和MVC4做无刷新上传DEMO HTML: <script src="~/Scripts/jquery-1.10.2.min.js"></ ...
- jQuery无刷新上传学习心得
记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- Sring3MVC页面无刷新上传文件
Sring3MVC页面无刷新上传文件 首先,这个框架是利用Ajax与Ctroller进行表单提交和数据交互的,但是Ajax是无法支持File上传的,所以在这里我使用了隐藏的Iframe来做文件上传的数 ...
- 文件无刷新上传(swfUpload与uploadify)
文件无刷新上传并获取保存到服务器端的路径 遇到上传文件的问题,结合之前用到过的swfUpload,又找了一个无刷新上传文件的jquery插件uploadify,写篇博客记录一下分别介绍这两个插件的实现 ...
最新文章
- 微软向.NET开发者开放Windows Phone 7 Market
- 妹纸这套路玩的好深,吹泡泡能吹出气球来
- Sublime Text 3 安装Package Control及配置Python环境
- LabelImg 批量生成标注图片文件夹序号(起始值+终值)
- C0304 备份最后一天所有修改的文件
- 二叉树删除节点+思路分析
- maven 添加本地库
- sql空字符串判断函数_Excel数据还可这样来查询:用SQL查询输出工作表指定区域更高效!...
- java二进制命令_Java二进制指令代码解析
- EntityModelStudio系列教程
- EasyUI的combobox
- javascript:访问iframe中的js函数
- qt开发linux性能测试工具,基于Qt的ARM-Linux系统测试工具
- 在OBS中解决无法录制chrome的问题
- 交叉编译工具链下载地址
- #1778. [Usaco2010 Hol]Dotp 驱逐猪猡(高斯消元)
- 如何建立一个属于自己的网站(小白教程)
- Android:自动点击屏幕
- 【CF #797 Div3】A-E
- 图像处理冷知识——dpi和ppi
热门文章
- java date加一天_Java日期时间API系列15-----Jdk8中API类,java日期计算2,年月日时分秒的加减等...
- OpenCV 像素的读取与操作
- matlab persistent静态变量
- 设置 Linux 的 LD_LIBRARY_PATH 变量
- Linux系统更新最新版R语言方法
- mysql 逻辑备份 物理备份_数据库的逻辑备份和物理备份--非RMAN
- rhel6.9 yum安装mysql_在RHEL6.9上安装MySQL5.7
- jar包不用java命令_使不能运行的JAR文件可以使用java -jar运行
- diff命令两个服务器文件,linux 比较两个文件夹不同 (diff命令, md5列表)
- line-height 属性