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

2024-07-31 08:34:49

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

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

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

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

利用ajaxfileupload插件实现文件上传无刷新的具体方法

做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js) ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件直接上代码吧
使用ajaxfileupload.js实现ajax上传文件php版

无论是PHP,还是其他的服务端脚本都提供了文件上传功能,实现起来也比较简单.而利用JavaScript来配合,即可实现Ajax方式的文件上传.虽然jQuery本身没有提供这样的简化函数,但有不少插件可以实现.其中,Phpletter.com提供的ajaxfileupload.js是一个轻量的插件,而且编写方式与jQuery提供的全局方法$.post()非常相似,简单易用. 不过,该插件实在太简化了,除了可提供需上传文件的路径外,也就不能传递额外的值到后台服务端.所以,我修改了一下该脚本,增加个一
ajaxFileUpload.js插件支持多文件上传的方法

前提条件: ajaxFileUpload.js插件多文件上传步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne
基于ajax实现文件上传并显示进度条

下面给大家分享下基于ajax实现文件上传并显示进度条.在jsp部分,需要设计一个表单,form的属性添加 enctype="multipart/form-data",设计一个iframe,作为隐藏.form的target等于iframe的name; 在servlet部分:文件上传用的Commons-FileupLoad,需要两个Jar,commons-fileupload和commons-io,少了第二个会报出找不到类的异常: 第一个servlet处理上传,及把上传进度保存到sessi
ajax 文件上传应用简单实现

这个插件支持多个文件选取功能,很不错,而且代码简单复制代码代码如下: $("#fileUpload").fileUpload({ 'uploader': 'style/uploader.swf', 'cancelImg': 'style/img/cancel.png', 'folder': '/mbs/fileUpload', 'script': '/mbs/FileUpload', 'buttonText': 'Durchsuchen', 'fileDesc': '*.jpg;*
AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页

1.引言 2.实现代码 2.1.服务器端代码 2.1.1. 文件上传状态类(FileUploadStatus) 2.1.2. 文件上传状态侦听类(FileUploadListener) 2.1.3. 后台服务类(BackGroundService) 2.1.4. 文件上传状态控制类(BeanControler) 2.2. 客户端代码 2.2.1. AjaxWrapper.js 2.2.2. fileUpload.html 2.2.3. result.jsp 2.2.4. fileUpload.c
ajax(iframe)无刷新提交表单、上传文件

找遍资料得出结果:不能不过同时也找到了解决办法,就是用iframe的方式来提交表单,即实现无刷新提交表单又可以上传文件! 一.HTML代码复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http
Ajax方式提交带文件上传的表单及隐藏iframe应用

一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数据提交成功之后的回调函数中,通过form单独提交文件,而这个提交文件的form的target就指向前述隐藏的iframe. html 代码复制代码代码如下: <html> <body> <form action="upload.jsp" id="form1" name=
ajax实现异步文件或图片上传功能

大家好,这篇文章我要给大家分享一个网页文件上传功能的代码,希望大家可以有所参考,或者给我提些建议. 众所周知现在的各大网站基本都设有文件上传功能,用户可以把自己喜欢的图片或其他文件放在网上存起来,以便以后用的时候方便去找,可是一个网页的文件上传功能究竟该怎么去设置呢?今天我就以图片上传为例向大家展示文件上传功能的具体步骤. 其实文件上传有两种方法,一种是from表单submit提交,一种是ajax实现异步提交,可是form表单提交有个问题就是每次在上传完成时会刷新界面,不能实现异步上传,所以现在
ajax上传多图到php服务器的方法

一般上传图片到服务器有两种方式: 1.把图片转换成二进制直接存储到数据库里 2.把图片存储到本地目录,并将图片地址存储到数据库里先粗浅地谈下我对这两种存储方法的优劣点的认识: 1.把图片转换成二进制直接存储到数据库的优点是有利于数据的备份和迁移,但缺点就是会影响数据读写速率.一般大图.多图不建议用此方式,一般存储用户头像.富文本内容存储时可以应用此方式. 2.将图片存储到本地目录,在数据库上只存储图片路径的优点是有利于数据的读写,毕竟存一个地址要比存整个图片的大小要小得多.但是缺点就不利于数据
PHP使用HTML5 FileApi实现Ajax上传文件功能示例

本文实例讲述了PHP使用HTML5 FileApi实现Ajax上传文件功能.分享给大家供大家参考,具体如下: FileApi是HTML5的一个新特性,有了这个新特性,js就可以读取本地的文件了,然后实现真正的Ajax上传文件了,而不是iframe方法,下面会介绍api的使用,以及实现Ajax上传文件: FileApi使用定义上传控件: <input type="file" name="pic" onchange="selfile();"
基于HTML5的可预览多图片Ajax上传

一.关于图片上传什么什么的在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中
Ajax上传实现根据服务器端返回数据进行js处理的方法

本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法.分享给大家供大家参考.具体如下: Ajax上传说白了还是使用form表单提交,在当前页面加一个iframe,将提交的内容跳转到iframe中,造成一种页面无刷新的错觉. 以前也做过上传,基本是是使用commons-fileupload组件,基本的步骤是使用servlet处理完上传之后,使用PrintWrite的对象实例输出显示内容,可以是直接输出内容,也可以是输出script进行操作如复制代码代码如下: response.
PHP实现上传多图即时显示与即时删除的方法

本文实例讲述了PHP实现上传多图即时显示与即时删除的方法.分享给大家供大家参考,具体如下: 就像这样的,每选择一个图片就会即时显示出来,附加到右边,也可以随意删除一个元素. 其实是,当type=file的input框框的onchange事件===>>>post数据提交到隐藏的ifram(form表单的target指定)===>>>接收到post数据的直接 echo script标签来返回数据到前端页面并且赋值,然后存储图片路径也是用隐藏域实现: HTML: <
Ajax上传文件进度条Codular

现在,人们喜欢在浏览网页时做一些其他事情而不离开该网页,这通常是通过ajax来实现.大多数情况,人们使用jQuery来实现,但是随着浏览器的进步,人们比不需要这么做.这里我们将介绍如何在不离开页面的情况下将文件上传到服务器,我们将使用与我们之前的文章中使用的相同的后端PHP代码. 该脚本将上传文件至服务器,同时显示上传进度,并最终返回上传文件的链接地址.在某些情况下,你可能想要返回上传文件的id或者其他的应用信息. Note: 该代码不支持较老的ie浏览器,通过Can I use我们只支持ie1
jQuery Ajax 上传文件处理方式介绍(推荐)

AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式. FormData对象 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过J
PHP如何将图片文件上传到另外一台服务器上

说,我有一个需求,就是一个临时功能.由于工作开发问题,我们有一个B项目,需要有一个商品添加的功能,涉及到添加商品内容,比如商品名字,商品描述,商品库存,商品图片等.后台商品添加的接口已经写完了,但是问题是目前没有后台页面,就是产品还没有出后台详细页面.前端已经完备了,上线了.后台还需要工作时间处理.所以目前的处理方法是在我们已经存在的A项目后台中,添加一个对B项目添加商品的功能. 一.当下问题 1.在我们已有的A项目中,新增一个添加商品的功能,这个本来是没有什么问题的,因为目前A项目中本身就已经
jQuery实现文件编码成base64并通过AJAX上传的方法

本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法.分享给大家供大家参考,具体如下: 使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果. 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload. 如何能达到灵活的程度呢,能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了. 灵光一闪,利用javascript的FileReader对象将文件编码
Python flask使用ajax上传文件的示例代码

目录前言 JS Form的enctype属性 Input MIME类型(更多直接百度,类型超乎你的想想) 上传单个文件 html代码部分 javascript代码部分 flask 视图函数部分上传多个文件 html js 出问题解决方案前言 JS 为什么要用ajax来提交在使用from提交时,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名. 为安全起见,即file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名.HTML value

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

相关推荐

随机推荐