首页 > 网络编程 > AJAX相关 > 正文

ajax上传多图到php服务器的方法_AJAX相关

2018-12-08 10:26:05

一般上传图片到服务器有两种方式:

1、把图片转换成二进制直接存储到数据库里

2、把图片存储到本地目录,并将图片地址存储到数据库里

先粗浅地谈下我对这两种存储方法的优劣点的认识:

1、把图片转换成二进制直接存储到数据库的优点是有利于数据的备份和迁移,但缺点就是会影响数据读写速率。一般大图、多图不建议用此方式,一般存储用户头像、富文本内容存储时可以应用此方式。

2、将图片存储到本地目录,在数据库上只存储图片路径的优点是有利于数据的读写,毕竟存一个地址要比存整个图片的大小要小得多。但是缺点就不利于数据的备份和迁移。

先介绍一下存储图片路径的方法:

html代码:

<form id="form1"> <span style="white-space:pre;"> </span><div class="bookImg">     <div class="img-box">       <input type="file" name="photo1" id="" title="文件不超过200kb,大小最佳为60*60">     </div>     <div class="img-box">       <input type="file" name="photo2" id="" title="文件不超过200kb,大小最佳为60*60">     </div>                 </div>   <input type="button" class="bookBtn btnBlue" id="publishBook" value="发布图书" onclick="fsubmit()"/> </form> 

ajax请求:

function fsubmit() {   var form1=document.getElementById("form1");     var fd =new FormData(form1);     $.ajax({        url: "photo.php",        type: "POST",        data: fd,        processData: false,        contentType: false,        success: function(response,status,xhr){         console.log(xhr);         var json=$.parseJSON(response);         var result = '';          result += '<br/><img src="' + json['photo1'] + '" height="100" />';          result += '<br/><img src="' + json['photo2'] + '" height="100" />';          result += '<br/>' + json['photo1'];          result += '<br/>' + json['photo2'];          $('#result').html(result);        }     });     return false; } 

php代码:photo.php

<?php     require('conn.php');     $nameTag = time();     $filename1 = $nameTag . '0' . substr($_FILES['photo1']['name'], strrpos($_FILES['photo1']['name'],'.'));      $filename2 = $nameTag . '1' . substr($_FILES['photo2']['name'], strrpos($_FILES['photo2']['name'],'.'));      $response = array();     $path1 = "img/" . $filename1; <span style="color:#ff0000;">//注意要在目录下新建一个名为img的文件夹用来存放图片     $path2 = "img/" . $filename2;     if(move_uploaded_file($_FILES['photo1']['tmp_name'], $path1) && move_uploaded_file($_FILES['photo2']['tmp_name'], $path2) ){                  $response['isSuccess'] = true;         $response['photo1'] = $path1;        $response['photo2'] = $path2;           }else{        $response['isSuccess'] = false;      }      echo json_encode($response); ?> 

数据库表我就不贴了,存图片地址,字段类型直接用字符型就可以了。

现在在介绍一下把图片转换成二进制直接存进数据库的方法:

这里我没有用ajax请求,直接用表单的post 请求提交数据

html代码:

<form action="photo.php"> <span style="white-space:pre;"> </span><div class="pic">     <input type="file" name="photo" id="" title="文件不超过200kb,大小最佳为60*60" onchange="imgPreview(this)">上传头像   </div> </form> 

php代码:photo.php

<?php   require('conn.php');          $image = mysql_real_escape_string(file_get_contents($_FILES['photo']['tmp_name']));    $sqlstr = "insert into user(photo) values('".$image."')";          @mysql_query($sqlstr) or die(mysql_error());     exit();        ?> 

这样就把图片转换成二进制并储存进数据库了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 相关标签:AJAX相关
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • 曝网友假装外国人写投诉信 ofo秒退押金并回函致歉
  • 苹果市值缩水逾2000亿美元 遭多家投行下调目标价
  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程