js上传图片预览，php后台接收实例，已改写为多图上传预览

本文链接：https://blog.csdn.net/sinat_23900111/article/details/70071291

这篇博客介绍了如何使用JavaScript实现多图上传预览功能，并通过Ajax将图片数据发送到PHP后台。关键点包括FileReader用于读取文件信息，以及在后台使用FormData对象处理上传。博主已将原有的单图预览修改为支持多图，并提供了详细的代码解析。

摘要由CSDN通过智能技术生成

上传图片预览这个出自超实用的js代码段，关于图片的处理那一章，php后台接收是网上比较少这方面的资源或者写得很复杂，这里简单记录。都是基于js

首先先调用两个文件夹animateManage.js和viewimg.js，可以在网上下载。相当好用。

关键点是FileReader这个知识点，可以读取文件的相关信息，包括路径。这是个关键点。

                    /*
                     * 调用FileReader 文件API的readAsDataURL，启动异步加载文件的数据，通过监听reade的onload事件，
                     * 等待数据加载完毕后，在回调函数onload事件中，通过reader的result属性即可获得图片文件的相关内容
                     * */
                    var reader = new FileReader(),
                            _file = this.files[0];      //读取被加载的文件对象
                   
                    reader.onload = (function(file) {   //监听load事件
                        return function() {
                            options.previewImgSrc.setAttribute("src", this.result);
                            options.previewImgSrc.style.display = "block";
                        };
                    })(_file);

                    reader.onerror = function(){//监听文件读取的错误处理
                        alert("文件读取数据出错");
                    }
                    reader.readAsDataURL(_file);//读取文件内容···

注意，这是单张图片的预览。

接下来是后台

我用的是ajax来传给后台，其实ajax网上太多资料关于传文件了，其实没那么复杂，很简洁。

关键点在FormData这个对象。#add_goods_info这个是from的id

      $("#add_btn").click(function()
  {
    var formData = new FormData($("#add_goods_info")[0]);  
    $.ajax({
      type: "post",
      //data:$("#add_goods_info").serialize(),
      data: formData,
      contentType: false,  
      processData: false,    
      url:"<?php echo site_url("gallery/update");?>",
      dataType:"json",
      success:function(data){
      alert(data);
        }
      })
    });

php后台按正常接收即可，抄w3c的例子也可以。

   if (file_exists('./uploads/source/head/'.