本例子采用html+jquery+php实现上传功能

html部分

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

           <form action="upload.php" method="post" enctype="multipart/form-data">

          <!--上传文件:-->

          <input type="file" name="mypic" />

          <input type="submit" value="上传"  id="submit"/>

      </form>

    </body>

</html>

js(jquery部分代码)

    <script src="jquery-1.9.1.min.js"></script>

    <script>

 $("#submit").click(function(){

                $.ajax({

                    url:"upload.php",

                    type:"POST",

                    dataType:"json",

                    success:function(data){

                        console.log(data);

                      }

                })

              })

    </script>

php->upload.php部分代码

<?php

//功能:完成上传图片

//php中有一个数组  $_FILES 保存当前上传文件所有信息

//1:获取上传文件名称

$picname = $_FILES["mypic"]["name"];

//2:获取上传文件大小

$picsize = $_FILES["mypic"]["size"]/1000;

if($picsize>6000){

  echo '{"code":-1,"msg":"图片大小不能超过2MB"}';

  exit;

}

//3:获取上传文件临时目录

$pictmp = $_FILES["mypic"]["tmp_name"];

//echo "<br/>";

//echo $pictmp;

//4:创建新图片名称

//4.1:获取原有文件名后缀 .jpg .gif .png

$type = strstr($picname,".");

//4.2:创建新名称 时间戳.随机数

$fileName = time().rand(1,9999).$type;

//4.3:移动文件(从上传临时文件->移动->uploads/)

//a:创建变量保存临时文件名

$src = $_FILES["mypic"]["tmp_name"];

//b:创建变量保存新目录名称

$des = "uploads/".$fileName;

//c:移动

//echo $des;

$rs = move_uploaded_file($src,$des);

if($rs){

 echo '{"code":1,"msg":"图片上传成功"}';

}else{

 echo '{"code":-1,"msg":"图片上传失败"}';

}    //10:40--10:42

echo $picname;

需要注意的是 在php部分存储的文件为uploads,因此 需要新建个uploads的文件夹，用来存储本地上传的文件。

进行完以上步骤后，就可以进行测试了。 lz此处用的xampp本地测试。

上传成功后会显示。此时在uploads文件下为多出来一个您刚刚上传的文件。

以上就是php+web实现文件上传的过程。实际项目中可参考此处略作更改即可实现需求哦，你学会了吗？

html+jquery+php实现文件上传全过程的更多相关文章

  1. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  2. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  3. jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  4. Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

    前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...

  5. Javascript Fromdata 与jQuery 实现Ajax文件上传

    <!DOCTYPE html> <html> <head> <title>ajax</title> <script type=&quo ...

  6. js 使用jquery.form.js文件上传

    1.文件上传,使用jquery.form.js插件库 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  7. jquery+springMVC实现文件上传

    此文章是基于 搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台 一. jar包介绍 1. commons-fileupload-1.3.1.jar 二. 相关程序 ...

  8. jQuery File Upload 文件上传插件使用一 (最小安装 基本版)

    jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...

  9. jQuery File Upload文件上传插件简单使用

    前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...

随机推荐

  1. 《DNS稳定保障系列3--快如闪电，域名解析秒级生效》

    在刚刚过去的双十一,又是一个全民狂欢的盛宴,天猫双十一的成交量高达2684亿.无数小伙伴在淘宝.天猫里买买买,今年你又剁手了多少?言归正传,在你疯狂秒杀的时候,有没有发现,今年的购物体验一如既往的好, ...

  2. 阿里云李刚：下一代低延时的直播CDN

    在上周落幕帷幕的多媒体领域技术盛会——LiveVideoStackCon音视频技术大会上,阿里云的高级技术专家李刚进行了<下一代低延时的直播CDN>技术分享.主讲人李刚,多年关注在CDN这 ...

  3. Python常用内置函数整理（lambda，reduce，zip，filter，map）

    匿名函数lambda lambda argument1,argument2,...argumentN :expression using arguments 1.lambda是一个表达式,而不是一个语 ...

  4. wndr4300刷任意系统及刷回官方原厂系统

    4300是目前性价比比较高的可玩路由器了,如果要买的话要买v1版本的,目前卖的都是v2,v2刷不了第三方系统. 注意:如果带宽低于50M,可以随便刷第三方系统玩,如果高于50M的带宽或者想组建千兆局域 ...

  5. arcgis api for javascipt 加载天地图、百度地图

    写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百 ...

  6. Linux后台执行脚本 &与nohup

    Linux后台执行脚本的方式: 0.脚本代码 [root@VM_1_3_centos apps]# cat test.php <?php sleep(5); echo "hello w ...

  7. mysql的windows客户端链接远程全套案例

    我是linux 的服务器,navicat12的客户端, 开始链接的时候需要开服务器上得对外爆漏端口 3306,方法: 添加指定需要开放的端口: firewall-cmd --add-port=/tcp ...

  8. 基础复习之HTML （doctype、标签语义化）

    这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈-还是写博客好玩儿-嘿嘿,下面正题 一.doctype 标准模式 (Full Standards Mode) 接近标准模式 (Almost S ...

  9. upc组队赛14 Bus stop【签到水】

    Bus Stop 题目描述 In a rural village in Thailand, there is a long, straight, road with houses scattered ...

  10. Java并发AtomicReferenceArray类

    java.util.concurrent.atomic.AtomicReferenceArray类提供了可以原子读取和写入的底层引用数组的操作,并且还包含高级原子操作. AtomicReference ...