利用imgareaselect辅助后台实现图片上传裁剪

因为项目当中用到图片裁剪,本来可以不用到后台进行裁剪的,但是要兼容万恶的IE浏览器,所以不得不使用后台进行裁剪。

这次使用到imgareaselect插件获取需要裁剪区域的坐标,再由后台进行裁剪操作。先上个效果图再说

但是这里有一个坑就是上传的图片过大,可能会造成裁剪的区域跟插件中显示的不一样,所以得现在后台对云图片进行压缩在裁剪。

/**
   * 等比例压缩算法:
   * 算法思想:根据压缩基数和压缩比来压缩原图,生产一张图片效果最接近原图的缩略图
   * @param srcURL 原图地址
   * @param deskURL 缩略图地址
   * @param comBase 压缩基数
   * @param scale 压缩限制(宽/高)比例 一般用1:
   * 当scale>=1,缩略图height=comBase,width按原图宽高比例;若scale<1,缩略图width=comBase,height按原图宽高比例
   * @throws Exception 

   */
  public static void saveMinPhoto(String srcURL, String deskURL, double comBase,
      double scale) throws Exception {
    File srcFile = new java.io.File(srcURL);
    String ext = srcURL.substring(srcURL.lastIndexOf(".") + 1);
    Image src = ImageIO.read(srcFile);
    int srcHeight = src.getHeight(null);
    int srcWidth = src.getWidth(null);
    int deskHeight = 0;// 缩略图高
    int deskWidth = 0;// 缩略图宽
    double srcScale = (double) srcHeight / srcWidth;
    /**缩略图宽高算法*/
    if ((double) srcHeight > comBase || (double) srcWidth > comBase) {
      if (srcScale >= scale || 1 / srcScale > scale) {
        if (srcScale >= scale) {
          deskHeight = (int) comBase;
          deskWidth = srcWidth * deskHeight / srcHeight;
        } else {
          deskWidth = (int) comBase;
          deskHeight = srcHeight * deskWidth / srcWidth;
        }
      } else {
        if ((double) srcHeight > comBase) {
          deskHeight = (int) comBase;
          deskWidth = srcWidth * deskHeight / srcHeight;
        } else {
          deskWidth = (int) comBase;
          deskHeight = srcHeight * deskWidth / srcWidth;
        }
      }
    } else {
      deskHeight = srcHeight;
      deskWidth = srcWidth;
    }
    BufferedImage tag = new BufferedImage(deskWidth, deskHeight, BufferedImage.TYPE_3BYTE_BGR);
    tag.getGraphics().drawImage(src, 0, 0, deskWidth, deskHeight, null); //绘制缩小后的图
    FileOutputStream deskImage = new FileOutputStream(deskURL); //输出到文件流
    ImageIO.write(tag, ext, new File(deskURL));
    deskImage.close();
  }

这就是压缩之后在进行裁剪了,好了上完整代码先

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传头像</title>
<link rel="stylesheet" href="../../statics/css/ewt/style_1.css" rel="external nofollow" type="text/css">
<link rel="stylesheet" href="../../statics/css/ewt/style_shangchuangtouxiang.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="../../statics/css/ewt/imgareaselect-default.css" rel="external nofollow" >
<link rel="stylesheet" href="../../statics/css/ewt/style.css" rel="external nofollow" type="text/css" />
<link rel="stylesheet" href="../../statics/scripts/layer/skin/default/layer.css" rel="external nofollow" >
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../statics/scripts/include.js"></script>
<script src="../../statics/scripts/template.js"></script>
<script src="../../statics/scripts/layer/layer.js"></script>
<script src="../../statics/scripts/cropbox.js"></script>
<script src="../../statics/scripts/jquery.imgareaselect.pack.js"></script>
<script src="../../statics/scripts/ajaxfileupload.js"></script>
<script src="../../ewt/user/scripts/shangchuangtouxiang.js"></script>
<script src="../../ewt/common/config.js"></script> 

</head> 

<body>
<include src="../common/user_head.html"></include>
<div class="bggg">
<div class="box">
 <div class="bos">
  <include src="../common/user_menu.html"></include>
 <div class="bos_r">
 <div class="biaoti">
    <h3>上传头像</h3>
   </div>
 <div style=" width:915px; height: 400; display: block; overflow: hidden; margin: 30px auto; ">
    <div style=" width:430px; margin:0 auto;">
    <div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px; float: left;">
   <img id="photo" src="" style="width: 300px; height: 300px;"/>
  </div> 

  <div id="preview" style="width: 100px; height: 100px; overflow: hidden; float: left;">
    <img src="" style="width: 100px; height: 100px;" id="smallImage"/>
  </div>
  </div>
  </div>
  <div style=" width:425px; margin:30px auto;">
  <div class="input_XZ1">
  <div class="input_XZ">选择图片</div>
  <input id="uplodimage" class="input_style"  name="uplodimage" type="file" onchange="uplodImage(this)">
  </div>
   <input id="imgUrl" type="hidden">
  <input type="button" value="上传" class="input_SC" onclick="upold();">
  </div>
  <input type="hidden" id="x1" value="" />
  <input type="hidden" id="y1" value="" />
  <input type="hidden" id="x2" value="" />
  <input type="hidden" id="y2" value="" />
  <input type="hidden" id="w" value="" />
  <input type="hidden" id="h" value="" /> 

</div>
</div>
</div> 

</div>  

<include src="../common/user_footer.html"></include>
</body>
</html>

js 代码

function preview(img, selection) {
  if (!selection.width || !selection.height)
    return; 

  var scaleX = 100 / selection.width;
  var scaleY = 100 / selection.height; 

  $('#preview img').css({
    width: Math.round(scaleX * 300),
    height: Math.round(scaleY * 300),
    marginLeft: -Math.round(scaleX * selection.x1),
    marginTop: -Math.round(scaleY * selection.y1)
  }); 

  $('#x1').val(selection.x1);
  $('#y1').val(selection.y1);
  $('#x2').val(selection.x2);
  $('#y2').val(selection.y2);
  $('#w').val(selection.width);
  $('#h').val(selection.height);
} 

$(function () { 

}); 

//上传原始图片
function uplodImage(target) {
  if(checkImage(target)){
    var url = httpUtils.rootPath+'/component/upload.do';
    $.ajaxFileUpload({
      url: url, //用于文件上传的服务器端请求地址
      secureuri: false, //是否需要安全协议,一般设置为false
      fileElementId: 'uplodimage', //文件上传域的ID
      dataType: 'json', //返回值类型 一般设置为json
      success: function (data) //服务器成功响应处理函数
      {
        var filePath = data.filePath;
        $('#photo').attr('src',httpUtils.rootPath+'/component/upload.do?action=download&filepath='+filePath);
        $('#smallImage').attr('src',httpUtils.rootPath+'/component/upload.do?action=download&filepath='+filePath);
        $('#imgUrl').val(filePath);
         $('#photo').imgAreaSelect({
    aspectRatio: '1:1',
    x1: 50, y1: 50, x2: 241, y2: 241,
    handles: true,
    fadeSpeed: 200,
    onSelectChange: preview
  });
  $('#x1').val("50");
  $('#y1').val("50");
  $('#x2').val("241");
  $('#y2').val("241");
  $('#w').val("191");
  $('#h').val("191");
       }
      });
  } 

} 

//上传裁剪后的图片
function upold() { 

  if($('#imgUrl').val()==''){
    layer.alert("请先选择图片在上传");
    return false;
  } 

  $.ajax({
       type: "post",
       url:httpUtils.rootPath+'/user/setHeadPicture',
       beforeSend: function(request) {
        request.setRequestHeader("jmtcp", header);
      },
       async:false,
       data: {
        x:$('#x1').val(),
        y:$('#y1').val(),
        width: $('#w').val(),
        imgUrl : $('#imgUrl').val(),
        heigth: $('#h').val()
       },
       dataType: "json",
       success: function(data){
            if(data.code==1){ 

              layer.alert(data.message,function(){
                window.location.href = '../user/grzy.html';
              });
            }else{
              layer.alert(data.message);
            }
           }
     });
} 

function checkImage(target) {
  var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
   var fileSize = 0;
   var filepath = target.value;
  // 为了避免转义反斜杠出问题,这里将对其进行转换
    var re = /(\+)/g;
    var filename = filepath.replace(re, "#");
    // 对路径字符串进行剪切截取
    var one = filename.split("#");
    // 获取数组中最后一个,即文件名
    var two = one[one.length - 1];
    // 再对文件名进行截取,以取得后缀名
    var three = two.split(".");
    // 获取截取的最后一个字符串,即为后缀名
    var last = three[three.length - 1];
    // 添加需要判断的后缀名类型
    var tp = "jpg,gif,bmp,JPG,GIF,BMP,png";
    // 返回符合条件的后缀名在字符串中的位置
    var rs = tp.indexOf(last);
    // 如果返回的结果大于或等于0,说明包含允许上传的文件类型
    if(rs < 0){
      layer.alert('您选择的上传文件不是有效的图片文件');
      return false;
    }
//  if (isIE && !target.files) {  // IE浏览器
//    var filePath = target.value; // 获得上传文件的绝对路径
//    var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
//    // GetFile(path) 方法从磁盘获取一个文件并返回。
//    var file = fileSystem.GetFile(filePath);
//    fileSize = file.Size;  // 文件大小,单位:b
//  }
//  else {  // 非IE浏览器
//    fileSize = target.files[0].size;
//  }
     var img1 = document.getElementById('photo');
    //img1.dynsrc=target.value;
    //img1.fileSize:IE , fileObj.files[0].fileSize:chrome, fileObj.files[0].size:FF
    var fileSize = img1.fileSize || target.files[0].fileSize || target.files[0].size;
  var size = fileSize / 1024 / 1024;
  if (size > 5) {
    layer.alert("图片不能大于5M");
    return false;
  }
  return true;
}

后台代码

public class CutImageUtils {
  public static SecureRandom rnd = new SecureRandom(); 

  public static String cutImage(int x, int y, int width, int height,String srcPath) throws Exception{
    String root = ApplicationContext.getProperty("upload_folder");
    String imagePath = root+srcPath;
     FileInputStream is = null;
     ImageInputStream iis = null;
     String uploadFolder = null ;
    String filepath = null ;
    String serverName = null ;
    uploadFolder = ApplicationContext.getProperties().getProperty("upload_folder").toString() ;
    filepath = generateServerFolder() ;
    serverName = generateServerName(srcPath) ;
    File file = new File(uploadFolder + filepath);
    if (!file.exists()) {
      file.mkdirs();
    }  

     try {
      // 读取图片文件
      saveMinPhoto(imagePath, imagePath, 300, 0.9d);
       //resetsize(imagePath, imagePath);
      is = new FileInputStream(imagePath);
      String ext = srcPath.substring(srcPath.lastIndexOf(".") + 1);
       Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(ext);
       ImageReader reader = it.next();
      // 获取图片流
       iis = ImageIO.createImageInputStream(is);
       reader.setInput(iis, true);
       ImageReadParam param = reader.getDefaultReadParam();
       /**
         *
         * 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域,通过 Rectangle 对象
         *
         * 的左上顶点的坐标(x,y)、宽度和高度可以定义这个区域。
         */
       Rectangle rect = new Rectangle(x, y, width, height);  

        // 提供一个 BufferedImage,将其用作解码像素数据的目标。
       param.setSourceRegion(rect);
       BufferedImage bi = reader.read(0, param);
       // 保存新图片
       ImageIO.write(bi, ext, new File(uploadFolder + filepath + serverName));
    } catch (FileNotFoundException e) {
      // TODO Auto-generated catch block
      if (is != null)
        is.close();
      if (iis != null)
        iis.close();
      e.printStackTrace();
    }
     return filepath + serverName ;
  } 

    /**
   *
   * @param config
   * @param file
   * @param request
   * @return
   */
  public static String generateServerName(String clientPath) {
    //按当前时间的分钟毫秒+3位随机数
    Calendar c = Calendar.getInstance();
    String min = get(c,Calendar.MINUTE);
    String sec = get(c,Calendar.SECOND);
    String mis = get(c,Calendar.MILLISECOND);
    String rnd = random();
    String ext = getFileExt(getClientName(clientPath)); 

    return min + sec + mis + rnd + ext ;
  } 

  /** 客户端文件名 */
  public static String getClientName(String clientPath) {
    if(null != clientPath){
      int index1 = clientPath.lastIndexOf("/");
      int index2 = clientPath.lastIndexOf("\\");
      if(index2 > index1){
        index1 = index2;
      }
      return clientPath.substring(index1+1,clientPath.length());
    }
    return null;
  } 

  public static String getFileExt(String fileName){
    if(null != fileName){
      int dot = fileName.lastIndexOf(".");
      if(dot >= 0){
        return fileName.substring(dot);
      }
    }
    return "";
  } 

  public static String random(){
    String value = String.valueOf(rnd.nextInt(1000));
    if(value.length() < 3){
      for(int i=value.length();i<3;i++){
        value = "0" + value;
      }
    }
    return value;
  } 

  public static String generateServerFolder() {
    //按当前年月日和小时生成文件路径
    Calendar c = Calendar.getInstance();
    String year = get(c,Calendar.YEAR);
    String mon = get(c,Calendar.MONTH);
    String day = get(c,Calendar.DAY_OF_MONTH);
    String hour = get(c,Calendar.HOUR_OF_DAY); 

    return year + "/" + mon + "/" + day + "/" + hour + "/";
  } 

  public static String get(Calendar c,int field){
    int v = c.get(field);
    if(field == Calendar.MONTH){
      v += 1;
    }
    String value = String.valueOf(v);
    if(value.length() == 1){
      value = "0" + value;
    }
    return value;
  } 

  /**
   * 缩小图片到固定长高
   * @param srcImagePath 读取图片路径
   * @param toImagePath 写入图片路径
   * @param width 缩小后图片宽度
   * @param height 缩小后图片长度
   * @throws IOException
   */
  public static void reduceImageByWidthHeight(String srcImagePath, String toImagePath, int width, int height) throws IOException{
    FileOutputStream out = null;
    try{
      //读入文件
      File file = new File(srcImagePath);
      String ext = srcImagePath.substring(srcImagePath.lastIndexOf(".") + 1);
      // 构造Image对象
      BufferedImage src = javax.imageio.ImageIO.read(file);
      // 缩小边长
      BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
      // 绘制缩小后的图片
      tag.getGraphics().drawImage(src, 0, 0, width, height, null);
      out = new FileOutputStream(toImagePath);
      ImageIO.write(tag, ext, new File(toImagePath));
    }catch(Exception e){
      e.printStackTrace();
    }finally{
      if(out != null){
        out.close();
      }
      out = null;
      System.gc();
    }
  } 

  /**
   * 等比例压缩算法:
   * 算法思想:根据压缩基数和压缩比来压缩原图,生产一张图片效果最接近原图的缩略图
   * @param srcURL 原图地址
   * @param deskURL 缩略图地址
   * @param comBase 压缩基数
   * @param scale 压缩限制(宽/高)比例 一般用1:
   * 当scale>=1,缩略图height=comBase,width按原图宽高比例;若scale<1,缩略图width=comBase,height按原图宽高比例
   * @throws Exception 

   */
  public static void saveMinPhoto(String srcURL, String deskURL, double comBase,
      double scale) throws Exception {
    File srcFile = new java.io.File(srcURL);
    String ext = srcURL.substring(srcURL.lastIndexOf(".") + 1);
    Image src = ImageIO.read(srcFile);
    int srcHeight = src.getHeight(null);
    int srcWidth = src.getWidth(null);
    int deskHeight = 0;// 缩略图高
    int deskWidth = 0;// 缩略图宽
    double srcScale = (double) srcHeight / srcWidth;
    /**缩略图宽高算法*/
    if ((double) srcHeight > comBase || (double) srcWidth > comBase) {
      if (srcScale >= scale || 1 / srcScale > scale) {
        if (srcScale >= scale) {
          deskHeight = (int) comBase;
          deskWidth = srcWidth * deskHeight / srcHeight;
        } else {
          deskWidth = (int) comBase;
          deskHeight = srcHeight * deskWidth / srcWidth;
        }
      } else {
        if ((double) srcHeight > comBase) {
          deskHeight = (int) comBase;
          deskWidth = srcWidth * deskHeight / srcHeight;
        } else {
          deskWidth = (int) comBase;
          deskHeight = srcHeight * deskWidth / srcWidth;
        }
      }
    } else {
      deskHeight = srcHeight;
      deskWidth = srcWidth;
    }
    BufferedImage tag = new BufferedImage(deskWidth, deskHeight, BufferedImage.TYPE_3BYTE_BGR);
    tag.getGraphics().drawImage(src, 0, 0, deskWidth, deskHeight, null); //绘制缩小后的图
    FileOutputStream deskImage = new FileOutputStream(deskURL); //输出到文件流
    ImageIO.write(tag, ext, new File(deskURL));
    deskImage.close();
  } 

  public static void main(String[] args) {
    try {
      String src = CutImageUtils.cutImage(11, 12, 100, 100, "2017/01/04/17/6348162d-5b50-4e7d-b414-93140498f8de.jpg");
      System.out.println(src);
    } catch (Exception e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    }
  }
}

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

时间: 2017-03-01

Django imgareaselect手动剪切头像实现方法

本文实例讲述了Django imgareaselect手动剪切头像的方法.分享给大家供大家参考.具体如下: index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上传图片</title> </head> <body> <form action="." method="

利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)

<body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="images

imgAreaSelect 中文文档帮助说明

一.技术文档 1.介绍 ImgAreaSelect是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,非常的fashion.另外,可以在这个选择图像区域的基础上应用网站的其他一些技术,比如图片拖曳.图片编辑等. 2.基本用法 这个插件基于jQuery上通过imgAreaSelect()方法来调用,它操作的对象是HTML中<img>元素内的图像. 复制代码 代码如下: <script type="text/javascript"> $(document)

jquery imgareaselect 使用利用js与程序结合实现图片剪切

复制代码 代码如下: /* 缺陷,当前在ff3下,用jquery的 width()与height()函数,在不设置图片的宽度与高度的时候,不能取到 需要在图片load函数里面初始化才可以 */ sanshi_imgareaselect = function(pic_id,view_div_id){     this.pic_obj = jQuery("#"+pic_id);     this.pic_width;     this.pic_height;     this.view_d

javascript截图 jQuery插件imgAreaSelect使用详解

为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能. 一,准备: 两个JS文件 1,jq

利用jQuery插件imgAreaSelect实现获得选择域的图像信息

还是先来分析一下: (以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的) 如何获得选择域的图像信息?  其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少? 把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了. (我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形)) 大小: 这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小.(这个应该不难) 位置: 1.假设我们只告诉计算机,这个选择区域一

php结合imgareaselect实现图片裁剪

引用CSS /js/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css 引用js /js/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.min.js /js/AjaxFileUploaderV2.1/ajaxfileupload.js html <div> <img src='blank.jpg' id="mainimg"> <

利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)

这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果.  3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ["区域":是宽*高,也就是面积:] ["放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数] 一.怎么能放大或者缩小图片的局部?

jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu

PHP+jQuery+Ajax实现多图片上传效果

今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

jquery插件ajaxupload实现文件上传操作

本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></sp

使用jquery.form.js实现图片上传的方法

本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

jQuery实现移动端图片上传预览组件的方法分析

本文实例讲述了jQuery实现移动端图片上传预览组件的方法.分享给大家供大家参考,具体如下: 之前的一篇博客:移动端H5图片预览和压缩,实现了基本的功能.这次则计划做成一个组件,可供前台.后台使用. 首先,我们先来捋一捋想要实现的功能: 预览 删除 压缩 上传到服务器 基本机构 这样,我们的组件结构就有了: ;!function(window, $, undefined){ function Upload() { }; Upload.prototype.change = function() {

PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数 原理:ajaxfileupload是通过监听iframe的onload方