本例子采用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. .Net Core 使用Redis进行数据缓存

    1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...

  2. 【Linux】关闭selinux

    vi /etc/selinux/config 将SELINUX=enforcing改为SELINUX=disabled 设置后需要重启才能生效

  3. 22 October in 614

    Contest A. defile struct 自定义排序.按照题意抽象成模型模拟就可以了. 自定义排序核心代码: struct node { int x, id; } d[1000003]; bo ...

  4. 一双木棋(chess)

    一双木棋(chess) 题目描述 菲菲和牛牛在一块 nn 行 mm 列的棋盘上下棋,菲菲执黑棋先手,牛牛执白棋后手. 棋局开始时,棋盘上没有任何棋子,两人轮流在格子上落子,直到填满棋盘时结束.落子的规 ...

  5. [CSP-S模拟测试]:施工(DP+单调栈+前缀和)

    题目描述 小$Y$家门前有一条街道,街道上顺序排列着$n$幢建筑,其中左起第$i$幢建筑的高度为$h_i$.小$Y$定义街道的不美观度为所有相邻建筑高度差的绝对值之和乘上常数$c$,为了改善街道环境, ...

  6. python 中的__str__ 和__repr__方法

    看下面的例子就明白了 class Test(object): def __init__(self, value='hello, world!'): self.data = value >> ...

  7. 102.kaldi 斯坦福语音识别工具的编译

    接着上一节,在编译完了openFST有限状态机之后,便开始了最重要部分,语音识别插件的编译过程 首先看目录是如下所示的 1.首先添加openBLAS的支持,这是一个矩阵运算库,个人觉得这个矩阵运算库 ...

  8. linux超级块和inode 详解 和 df 、du 命令详解与环境变量

    一.inode块,Unix文件的核心. 首先需要明白的是,在Unix操作系统中的任何资源都被当作文件来管理.如目录.光驱.终端设备等等,都被当作是一种文件.从这方面来说,Unix操作系统中的所有的目录 ...

  9. Transition 过渡/转场动画(一)

    UIViewController 的转场效果 当viewController通过push 或 present 进行转场时, 系统自带的动画是从右侧push进来一个新的viewControler (或从 ...

  10. Java学习之多线程(定义)

    进程:正在运行中的程序线程:负责执行程序的控制单元(执行路径)一个进程中可以有多个执行路径,称之为多线程一个进程中至少要有一个线程 创建新执行线程有两种方式 一.继承Thread类步骤:1.定义一个类 ...