欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

php教程

jQuery+PHP实现简单的图片上传功能

php教程 我的站长站 2020-10-08 共88人阅读

图片上传思路:通过AJAX实现图片上传,然后把PHP返回的图片地址,加入到隐藏字段中,最后通过表单提交给后台PHP,代码如下

HTML代码 zimg.html文件:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义上传图片</title>
</head>
<body>
<form action="a.php?action=2" method="post">
<span>
上传图片
</span> 
<span>
<input type="file" id="img_url" name="img_url" accept=".jpg, .gif, .jpeg, .bmp, .png"/>
<a onclick="UpLoadImg()">上传</a>
<input type="hidden" id="url_data" name="url_data"/>
</span>
<br>
<span>
<input type="submit" value="提交">
</span>
</form>
</body>
<!-- 引入jq -->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
function UpLoadImg(){
//获取上传文件
var formData = new FormData();
formData.append('img_url', $('#img_url')[0].files[0]);
console.log(formData)
//提交后台处理
$.ajax({
url: 'a.php?action=1',
type: 'POST',
cache: false,
data: formData,
dataType: "JSON",
processData: false,
contentType: false
}).done(function(res) {
console.log(res.url);
if(res.status == 1){
//赋值给字段
$('#url_data').val(res.url);
alert(res.msg)
}else{
alert(res.msg)
}
}).fail(function(res) {
});
}
</script>
</html>

后台php代码 a.php:

<?php
if($_GET['action'] == 1){//上传图片接口
$img = $_FILES['img_url'];
//获取上图片后缀
$type = strstr($img['name'], '.');
$rand = rand(1000, 9999);
//命名图片名称
$pics = date("YmdHis") . $rand . $type; 
//上传路径
$pic_path = "img/". $pics;
//移动到指定目录,上传图片
$res = move_uploaded_file($img['tmp_name'], $pic_path);
if($res){
echo json_encode(['status' => 1, 'msg' => '上传成功','url' => $pic_path]);exit;
}else{
echo json_encode(['status' => 0, 'msg' => '上传失败']);exit;
}
}elseif($_GET['action'] == 2){//提交文件表单
echo '<pre>';
var_dump($_POST);
}


相关推荐
  • jquery教程
  • php代码
  • php上传
  • jQuery获取file控件中图片的宽高与大小

    jQuery获取file宽高的代码如下,仅在火狐中测试了,其他浏览器兼容性未知。var _URL = window.URL || window.webkitURL;$("#file").change(function (e) { var file, img; if ((file = this.files[0])) { img = new Image(); img.onload = func...

    js教程 128 5年前
  • Jquery实战视频教程 6小时精通Jq
    Jquery实战视频教程 6小时精通Jq

    Jquery实战视频教程 6小时精通Jq,实现小应用,附带教程源码。视频教程列表第7章 自动以Alert第6章 标记完成状态、定时提醒第5章 Task详情第4章 添加及查看Task第3章 细节完善第2章 整体布局第1章 ...

    视频教程 119 4年前
  • JQuery鼠标移动添加删除样式

    JQuery鼠标移动添加删除样式方法,下面为代码案列$("a").hover(function(){ $(this).find("b").show();},function(){ $(this).find("b").hide();})鼠标移到A标签触发事件,下面的B标签显示,后门的function就是鼠标移开隐藏。...

    js教程 109 4年前
  • jQuery1.11.3参考手册.chm下载
    jQuery1.11.3参考手册.chm下载

    jQuery1.11.3参考手册.chm,包含以下主要内容:速查表、核心、选择器、属性、筛选、文档处理、CSS、事件、效果、Ajax、工具、事件对象、延迟对象、回调函数jQuery手册截图...

    电子书 55 3年前
  • jQuery淡入淡出效果语法教程

    实现前端特效的方法很多,最方便的还是css,当然有些特效还是使用JavaScript脚本比较简单,具体的还得看情况而定。jquery作为高度封装的JavaScript,它给我们提供了一些特效实现方式,我们一起来学习下吧。jQuery Fading 方法通过 jQuery,您可以实现元素的淡入...

    js教程 83 4年前
  • 支付宝企业账户转账个人账户php接口代码

    前言支付宝企业账户转账个人账户php接口代码,该接口主要用于平台对用户奖励的发放,场景也很简单就是我在你平台上有余额,我提现,平台给钱。只不过项目中是用的官方的SDK调用的,仔细看了下那个SDK目录,把很多无用的接口(目前自己用不上)也包含在里面,作为强...

    php教程 178 2年前
  • php判断目录文件是否存在

    一段简单的php判断目录文件是否存在代码,收藏记录一下,以后肯定用得到的。<?php$filename = &#39;../../e/install/&#39;; if (file_exists($filename)) { echo "<h3><div align=&#39;center&#39;><font color=&#39;#FF0000&#39;>存在安全风险!请将 ...

    php教程 125 2年前
  • curl函数获取API接口数据方法

    PHP利用curl函数,获取API接口数据方法示例代码,自用收藏<?php $weather = curl_init(); curl_setopt($weather,CURLOPT_URL,"https://api.pc2801.com/cqssc/".time()); curl_setopt($weather, CURLOPT_SSL_VERIFYPEER, false); //如果...

    php教程 102 2年前
  • 158网盘直连解析代码

    API代码<?php/*** @package 158Pan* @author Andy* @version 1.2.0* @link https://lsland.cn*/// 指定允许其他域名访问 header(&#39;Access-Control-Allow-Origin:*&#39;);header(&#39;content-type:application/json;charset:utf-8&#39;);functi...

    php教程 144 3年前
  • PHP获取QQ用户昵称+头像API接口代码

    如果要获得QQ用户的头像和昵称,需要在腾讯开放平台申请API接入才可以,但是这个不需要!只需要输入用户的正确的QQ号即可返回用户的头像和昵称。API接口代码<?php // 通过QQ号即可获取用户信息 // 获取QQ头像接口// http://q1.qlogo.cn/g?b=qq&nk=QQ号&s=...

    php教程 257 3年前
  • php上传大文件必备配置方法

    项目要求如果你的项目需要用到大文件上传或下载功能,就必须首先修改PHP的配置才行,否则上传或下载操作就会超时,操作失败。操作步骤打开php配置文件php.ini,首先找到; file uploads ;区域,有影响文件上传的以下几个参数:file_uploads = on ;//是否允许...

    php教程 81 1年前
  • 百度编辑器上传word转html

    后台上传word转html到编辑器中,编辑器是使用的百度编辑器,先在页面合适的位置写个上传框<button type=”button” name=”fileword” id=”upload-fileword”>上传word文件</button>前端用的layui框架,不需要写提示框,图个方便,大家自行选择<script>layui...

    php教程 90 3年前
  • jQuery+PHP实现简单的图片上传功能

    图片上传思路:通过ajax实现图片上传,然后把PHP返回的图片地址,加入到隐藏字段中,最后通过表单提交给后台PHP,代码如下HTML代码 zimg.html文件:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, init...

    php教程 88 4年前
  • PHP新手必学文件上传下载实例

    都知道PHP无非就是增删改查,学会了增删改查就入门了PHP,我的站长站分享一篇PHP新手必学文件上传下载实例,快来学习吧。主页index.php<html><head><title>图片操作</title><style>#contains {width: 500px;margin: 0 auto;text-align: center;color: #0F...

    php教程 55 4年前
  • 京东图床上传api接口源码

    API接口源码<?phpif (class_exists(&#39;CURLFile&#39;)) { // php 5.5$post[&#39;file&#39;] = new \CURLFile(realpath($_FILES[&#39;Filedata&#39;][&#39;tmp_name&#39;]));} else {$post[&#39;file&#39;] = &#39;@&#39;....

    php教程 164 4年前