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

 更新时间:2018年05月28日 15:24:39   作者:2b0x  
这篇文章主要为大家详细介绍了ajax上传多图到php服务器的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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();        
?> 

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

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

相关文章

  • IE9 IE8 ajax跨域问题的快速解决方法

    IE9 IE8 ajax跨域问题的快速解决方法

    下面小编就为大家带来一篇IE9 IE8 ajax跨域问题的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • ajax无刷新评论功能

    ajax无刷新评论功能

    这篇文章主要为大家详细介绍了ajax无刷新评论功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • ajax设置async校验用户名是否存在的实现方法

    ajax设置async校验用户名是否存在的实现方法

    下面小编就为大家带来一篇ajax设置async校验用户名是否存在的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • AJAX实现鼠标经过弹出详细介绍示例

    AJAX实现鼠标经过弹出详细介绍示例

    鼠标经过弹出详细内容的效果想必大家都有见到过吧,其实很简单,在本文为大家介绍下使用ajax实现此效果,感兴趣的朋友可以参考下
    2013-09-09
  • Ajax 上传图片并预览的简单实现

    Ajax 上传图片并预览的简单实现

    下面小编就为大家带来一篇Ajax 上传图片并预览的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 使用ajax操作JavaScript 对象详解

    使用ajax操作JavaScript 对象详解

    这篇文章主要介绍了使用ajax操作JavaScript 对象的相关资料,需要的朋友可以参考下
    2015-01-01
  • AJAX如何实现无刷新登录功能

    AJAX如何实现无刷新登录功能

    点击登录按钮时弹出登录窗口,输入正确的用户名密码后点击登录则登录窗口关闭,状态改为当前用户名.这篇文章主要介绍了AJAX如何实现无刷新登录功能,需要的朋友参考下
    2017-01-01
  • Ajax 框架学习笔记

    Ajax 框架学习笔记

    下面是一些常见ajax的一些属性与方法,大家一定要熟练掌握。
    2009-03-03
  • 那些年,我还在学习Ajax 学习笔记

    那些年,我还在学习Ajax 学习笔记

    Ajax不用说,每个做web开发的同志都知道,因为它是学习web开发必经之路,不管你是做asp.net,还是javaWeb,还是PHP
    2012-03-03
  • jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

    jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

    CSS也使得表格的布局越来越光彩耀人。但是,无论如何,都掩饰不了那些包装下的死板,接下来为大家介绍下让那些死板的数据 更具有可读性、可用性
    2013-04-04

最新评论