一、实现图片上传方法一

html的写法:

<form action="handle.php" name="form" method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
  <input type="submit" name="submit" value="上传" />
</form>
 
php后台实现:
$file = $_FILES['file'];//得到传输的数据
//得到文件名称
$name = $file['name'];
$type = strtolower(substr($name,strrpos($name,'.')+1)); //得到文件类型,并且都转化成小写
$allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型
//判断文件类型是否被允许上传
if(!in_array($type, $allow_type)){
  //如果不被允许,则直接停止程序运行
  return ;
}
//判断是否是通过HTTP POST上传的
if(!is_uploaded_file($file['tmp_name'])){
  //如果不是通过HTTP POST上传的
  return ;
}
$upload_path = "D:/now/"; //上传文件的存放路径
//开始移动文件到相应的文件夹
if(move_uploaded_file($file['tmp_name'],$upload_path.$file['name'])){
  echo "Successfully!";
}else{
  echo "Failed!";
}
 
二、利用uploadify实现无刷新并且带进度条的上传
首先下载uploadify插件,保存在项目中的某个文件夹下面,然后引入三个文件
link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/uploadify/jquery.min.1.7.js"></script>
<script type="text/javascript" src=js/uploadify/jquery.uploadify.min.js"></script>
 
然后引用以下代码:
<script type="text/javascript">
    $(function(){
      $(".uploadbutton").each(function(){
        
        bidtype="上传";
        $(this).uploadify({
          swf: 'js/uploadify/uploadify.swf',
          uploader: "handle.php"//处理上传的php文件或者方法
          multi: true//是否开启一次性上传多个文件
          queueSizeLimit:20,  //最大允许上传的文件数量
          buttonText: bidtype,        //按钮文字
          height: 34,               //按钮高度
          width: 82,               //按钮宽度
          auto:false//选择完图片以后是否自动上传
          method:'post',
          fileTypeExts: "*.jpg;*.png;*.gif;*.jpeg;",      //允许的文件类型
          fileTypeDesc: "请选择图片文件",      //文件说明
          postData:{},
          formData: { "imgType": "normal","timestamp":"asdfsa","token":"48f262516b3912a060d21ef6af564668" }, //提交给服务器端的参数
          onUploadSuccess: function (file, data, response) {  //一个文件上传成功后的响应事件处理
            var data = $.parseJSON(data);
          }
        });
      })
    });
  </script>
<body>
  <span id="commercial_upload" class="uploadbutton"></span>
</body>
 
 
 
 
 

   
 
<link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/uploadify/jquery.min.1.7.js"></script>
<script type="text/javascript" src=js/uploadify/jquery.uploadify.min.js"></script>

然后引用以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript">
    $(function(){
      $(".uploadbutton").each(function(){
        
        bidtype="上传";
        $(this).uploadify({
          swf: 'js/uploadify/uploadify.swf',
          uploader: "handle.php"//处理上传的php文件或者方法
          multi: true//是否开启一次性上传多个文件
          queueSizeLimit:20,  //最大允许上传的文件数量
          buttonText: bidtype,        //按钮文字
          height: 34,               //按钮高度
          width: 82,               //按钮宽度
          auto:false//选择完图片以后是否自动上传
          method:'post',
          fileTypeExts: "*.jpg;*.png;*.gif;*.jpeg;",      //允许的文件类型
          fileTypeDesc: "请选择图片文件",      //文件说明
          postData:{},
          formData: { "imgType": "normal","timestamp":"asdfsa","token":"48f262516b3912a060d21ef6af564668" }, //提交给服务器端的参数
          onUploadSuccess: function (file, data, response) {  //一个文件上传成功后的响应事件处理
            var data = $.parseJSON(data);
          }
        });
      })
    });
  </script>
<body>
  <span id="commercial_upload" class="uploadbutton"></span>
</body>

样式如下

当然此按钮的样式我改动过,大家可以根据自己的需要修改样式文件,改变此按钮的样式
同样的php代码 handle.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$file = $_FILES['Filedata'];//得到传输的数据
//得到文件名称
$name = $file['name'];
$type = strtolower(substr($name,strrpos($name,'.')+1)); //得到文件类型,并且都转化成小写
$allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型
//判断文件类型是否被允许上传
if(!in_array($type, $allow_type)){
  //如果不被允许,则直接停止程序运行
  return ;
}
//判断是否是通过HTTP POST上传的
if(!is_uploaded_file($file['tmp_name'])){
  //如果不是通过HTTP POST上传的
  return ;
}
$upload_path = "D:/now/"; //上传文件的存放路径
//开始移动文件到相应的文件夹
if(move_uploaded_file($file['tmp_name'],$upload_path.$file['name'])){
  echo "Successfully!";
}else{
  echo "Failed!";
}

以上两种方式上传可以说PHP处理的原理是相同的,只是前台显示的样式不同,第二种方式是无刷新,并且带有返回值,可以方便我们做其它的处理。虽然常用,但是总归会受限制,使用起来不是很灵活。
随着html5的发展的越来越成熟,我们可以利用h5中的一些方法实现上传功能,此时后台PHP的处理代码完全不同于以上两种方式,并且使用起来很灵活。由于篇幅限制,本篇我不向大家介绍这种方式,有兴趣的可以参考php+html5实现无刷新图片上传教程,希望大家会喜欢。

如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!! 点击进入社区

 
Tags:php 图片上传
 

最新评论

评论(0人参与0条评论)

 

来说两句吧...
还没有评论,快来抢沙发吧!

 

php中上传图片,原生代码的更多相关文章

  1. jquery中ajax原生代码的分析模仿

    function ajax(obj){     var defaults = {         url: "#",         data: {},         type: ...

  2. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  3. 移动开发中如何整合HTML 5和原生代码

    移动开发中如何整合HTML 5和原生代码 https://blog.csdn.net/lvjin110/article/details/41038565

  4. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  5. 新型编译器将原生代码转换为JavaScript

    导读:Emscripten C/C++到JavaScript项目利用来自LLVM的后端构建起更具速度与针对性优势的编译方案. 在当初刚刚公布时,Emsripten听起来完全像是个冲劲十足的技术笑谈:一 ...

  6. ANE原生代码的调试(安卓)

    忙了一天终于有空继续这篇教程了. ANE的原生代码的调试其实在Adobe的官网有介绍的,但是同样很含糊,我摸索了一段时间现在记录下我的心得. 首先你得安装Eclipse,然后你得启动Eclipse 然 ...

  7. Cordova - 与iOS原生代码交互2(使用Swift开发Cordova的自定义插件)

    在前一篇文章中我介绍了如何通过 js 与原生代码进行交互(Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)),当时是直接对Cordova生成的iOS工程项目进行编辑操作的(添加 ...

  8. Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)

    在前面的文章中介绍的了如何使用Cordova进行跨平台应用的开发,使用Cordova的话基本上就不需要在写系统原生代码了,只要通过编写html页面和js方法即可. 但在有些特殊情况下,还是是需要htm ...

  9. ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案

    摘要: ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案 在struts2应用中使用ueditor富文本编辑器上传图片或者附件时,即使配置 ...

  10. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

随机推荐

  1. 上传文件代码报错,java.lang.ClassNotFoundException: org.apache.commons.fileupload.FileItemFactory

    2018-09-11 11:11:08.235 ERROR 14352 --- [nio-8080-exec-5] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : ...

  2. DashBoard创建各种表(二)

    添加范围过滤器 “ 范围过滤器”允许您将过滤应用于其他仪表板项.此项目显示带有选择拇指的图表,允许您过滤掉沿参数轴显示的值. 如图,可以根据选择不同的CategorySales范围显示图表1的内容了. ...

  3. biaffineparser

    代码: 一.pytorch,可以直接跑 https://github.com/chantera/biaffineparser python parser.py train --out model -- ...

  4. 编译原理作业(第一次)-完成retinf.c(阉割版)

    首先,作业要求概括如下: 根据前缀表达式文法,实现statements() 和expression() 两个函数. 并且要求使得语义分析在完成分析前缀表达式并输出中间代码的同时,也能够将前缀表达式翻译 ...

  5. java中二维数组内存分配

    区分三种初始化方式: 格式一: 数据类型[][] 数组名 = new 数据类型[m][n]; m:表示这个二维数组有多少个一维数组. n:表示每一个一维数组的元素有多少个. //例:int arr[] ...

  6. bat 传递参数

    调用bat时,传递参数有个小问题,记录一下. 1.问题描述: 传递参数时,接收的值不对.传递了“1,2,3”,接收时,只剩下1.后面的没有了. 解决: 原因是bat取参时,语法弄错了. Syntax ...

  7. Visual Studio 2017 Android 调试无法连接到虚拟机

    输出窗口输出如下: 1>Starting deploy 4.5" KitKat (4.4) HDPI Phone ... 1>Starting emulator 4.5" ...

  8. python如何输出文件的年月日

    import time print('{}BiasedMF312and4414_rt.txt'.format(time.strftime("%Y-%m-%d"))) 输出: 201 ...

  9. [转]CPU-bound(计算密集型) 和I/O bound(I/O密集型)

    转自:http://blog.csdn.net/q_l_s/article/details/51538039 I/O密集型 (CPU-bound) I/O bound 指的是系统的CPU效能相对硬盘/ ...

  10. AR图像识别 AR识别图像 AR摄像头识别 外包开发 AR识别应用开发就找北京动点软件

    当绝大多数手机厂商还在追求后置双摄拍照的时候,已经有人开始潜心研究AR手机了.刚刚结束的美国消费电子展上,华硕发布了全新的ZenFone AR手机,配备5.7英寸2K屏.骁龙821处理器.8GB内存, ...