js上传图片到后端并保存

前端页面:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="../../../static/jqku/jquery-4.js"></script>
<!--该方案可以和后端进行交互,后端文件在http://localhost:8090/windows-A/demo1.php-->
<form action="http://localhost:8090/windows-A/fileLoad.php" method="POST" enctype="multipart/form-data" target="stop"><input type="file" name="file" id="file"><button id="btn" type="submit">上传</button>
</form>
<!--外部窗口但可以阻止表单的跳转行为-->
<iframe name="stop"  frameborder="0"></iframe><!--预览图片的demo元素-->
<img src="" alt="" id="pic"><script>/*点击按钮后上传*/$("#btn").click(function (){/*获取类型为file的input对象*/let file = $("input[name = file]").prop("files")[0]console.log(file)/*延时预览*/setTimeout(function (){$("#pic").attr("src",`http://localhost:8090/windows-A/images/${file.name}`)},300)return})</script>
</body>
</html>

后端我用的是php来编写的:

<?php
/*内容类型为文本和html,字符集为utf-8*/
header("Content-type:text/html;charset=utf-8");
/*访问控制请求为全部(跨域请求全部允许)*/
header("Access-control-Allow-Origin:*");$file = $_FILES["file"]["tmp_name"]; //接收上传的图片路径
$filename = $_FILES["file"]["name"]; //用于保存接收图片的文件名
$path = "images/";  //设置上传图片存入的文件夹和目录/*move_uploaded_file参数为(上传图片路径,图片上传后的完整路径)*/
$res = move_uploaded_file($file,$path.$filename);if($res){echo "文件上传成功" . $path.$filename;
}else{echo "文件上传失败";
}

挺简单的可以自己理解一下,上面基本每行都有标注;

主要功能就和头像上传差不多

js上传图片到后端并保存相关推荐

AFNetworking 4.x高版本上传图片，后端采用springBoot测试
AFNetworking 4.x高版本上传图片,后端采用springBoot测试 Pod加入 pod 'AFNetworking', '~> 4.0.1' -(void)sendStatusWi ...
原生 js 上传图片
js <!doctype html> <html> <head><meta charset="utf-8"><title> ...
JS实现Echarts的图表保存为图片功能
文章目录需求分析开发准备实现思路效果图参考链接需求分析实际项目开发过程中经常会有图表展示功能,同时为了满足用户需要,会附带着图表导出功能,主要形式就是保存为图片.在Echarts中本身就 ...
本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
mock模拟接口测试 vue_vue+mock.js实现前后端分离
之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范 ...
vue 新建的页面如何访问_Vue.js—实现前后端分离架构中前端页面搭建（四）（完）...
[Vue.js实现前后端分离架构中前端页面搭建] 二十.实现服务端登录业务前提:已经有单机版Eureka,端口8761.启动开Eureka 1. 新建父项目新建backend_parent. 为了 ...
JS纯前端实现文件保存
JS纯前端实现文件保存 <body><a href="" id="a">click here to download your file ...
html+js将文本和图片保存（下载）到本地技术
html+js将文本和图片保存(下载)到本地技术我在博文https://blog.csdn.net/cnds123/article/details/120469779介绍了用html+js读取本地文 ...
js上传图片进行预览
js上传图片进行预览上传图片经常遇到这样的问题,就是需要实现预览,由于浏览器的安全机制,不能直接读取本地文件,所以需要使用js绕一圈实现预览效果 HTML代码如下 <input type=&q ...

js上传图片到后端并保存

js上传图片到后端并保存相关推荐

最新文章

热门文章