图片上传（方法一：jquery.upload.js）

一、在JSP页面引入jquery.upload.js 文件：

二、JSP页面代码：

<!-- 弹窗  开始  -->

        <div class="dialog_teachermanage" id="addDialog" style="width:923px; display:none" >

              <div class="dialog_title" data-operateType="add"></div>

              <form id="formId" method="post" enctype="multipart/form-data">

                  <div class="dialog_body">

                      <div class="left">

                          <!-- 上传头像  ajax提交  class="hide"  -->

                          <div class="head_photo">

                              <input type="button" id="head_pic_btn" value="点击上传头像" />

                              <img src="${ctx}/static/images/common/head_default.jpg" data-img="head_default.jpg" width="180px" height="210px" id="head_img" />

                          </div>

                          <!-- 上传头像  form提交  -->

                          <!--

                          <div class="tphoto" name="head_img" id="head_img">

                            <input type="file" name="file" id="file" onchange="previewImage(this)" />

                            <div id="preview">

                                <img id="imghead" border="1" width="100px;" heigh="100px;" src='${ctx}/static/images/common/head_default.jpg'>

                            </div>

                          </div>

                           -->

                          <div class="clear" style="height:30px;"></div>

                          <!-- 隐藏的标签查询、输入框 -->

                          <div class="addsign" id="addCourse">

                              <div class="tagdiv">

                                <a class="addtag"><i class='iconfont'></i>添加标签</a>

                                <div class="taginput clearfix">

                                    <input class="form-control" id="tagName" type="text" />

                                    <i class="iconfont ok" id="addtag-ok"></i>

                                    <i class="iconfont cancel" id="addtag-cancel"></i>

                                </div>

                            </div>

                          </div>

                          <ul class="singul labels" name="labels" id="labels"></ul>

                      </div>

                      <div class="right">

                          <input type="hidden" id="id">

                          <div class="right_tinput">

                              <span class="t_span">姓名</span>

                              <input type="text" name="name" id="name" data-rule="required;length[1~30]" data-tip="30字以内"/>

                          </div>

                          <div class="right_tinput">

                              <span class="t_span">头衔</span>

                              <input type="text" name="title" id="title" data-rule="length[0~30]" data-tip="30字以内"/>

                          </div>

                          <div class="right_tinput">

                              <span class="t_span">电话</span>

                              <input type="text" name="phone" id="phone"  data-rule="mobile"  data-rule-mobile="[/^1[3458]\d{9}$/, '请检查手机号格式']" />

                          </div>

                          <div class="right_tinput">

                              <span class="t_span">邮箱地址</span>

                              <input type="text" name="email" id="email" data-rule="email;length[0~50];"/>

                          </div>

                          <div class="right_tinput">

                              <span class="t_span">讲师类型</span>

                              <select id="trainerTypeId_add"  name="trainerTypeId" placeholder="请选择"/></select>

                          </div>

                          <div class="right_tinput">

                              <span class="t_span">专业领域</span>

                              <textarea  cols="46" rows="5" placeholder="限200字" name="proField" id="proField" data-rule="length[0~200]"></textarea>

                          </div>

                          <div class="right_tinput">

                              <span class="t_span">简介</span>

                              <textarea cols="46" rows="5" placeholder="限200字" name="intro" id="intro" data-rule="length[0~200]"></textarea>

                          </div>

                      </div>

                  </div>

                  <div class="dialog_bottom">

                      <div class="buttons">

                          <button type="button" id="cancel">取消</button>

                          <button type="submit" >保存</button>

                        </div>

                  </div>

              </form>

          </div>

          <!-- 弹窗  结束  -->

三：JS代码：

<script type="text/javascript" >

    $(function(){

        //点击上传头像

        $("#head_pic_btn").click(function(){

            $.upload({

                url:'${ctx}/td/trainer/uploadHeadImg.do',

                fileName:'img',

                dataType:'json',

                onComplate:function(data){

                    //删除data中<pre>标签

                    var start = data.indexOf(">");

                    if (start != -1) {

                        var end = data.indexOf("<", start + 1);

                        if (end != -1) {

                            data = data.substring(start + 1, end);

                        }

                    }

                    if(data!==''){

                        //$("#head_pic_btn").hide();

                        //$("#head_img").show().attr('src',"${ctx}/upload/trainer_picture/"+data);

                        $("#head_img").attr("src","${ctx}/upload/trainer_picture/"+data);

                        $("#head_img").attr("data-img",data);

                        /**

                        data=JSON.parse( data.match(/{.+}/)[0] )

                        if( data.result==='true' ){

                            $('#head_pic_btn').hide();

                            $('#head_img').show().attr('src',"${ctx}/upload/trainer_picture/"+data);

                        };

                        alert(data.resultDesc);

                        */

                    };

                }

            });

        });

 });

四、JS提交代码（带预览效果）：

//新增修改 验证提交

          $("#formId").validator({

              theme :"simple_bottom",

                valid: function(form){

                    var tname=$(".dialog_title").text();

                     if(tname.indexOf("修改")>=0){

                         //修改保存

                         //SaveEditTeacher();

                         var labels = "";

                      var index = 0;

                      $(".labels").find("li").each(function(){

                          if(index==0){

                              labels += "'" + $(this).attr("data-id") + "'";

                          }else{

                              labels += ",'"+$(this).attr("data-id") + "'";

                          }

                          index++;

                      });

                      var param={headImg:$("#head_img").attr("data-img"),name:$("#name").val(),title:$("#title").val(),phone:$("#phone").val(),email:$("#email").val(),proField:$("#proField").val(),trainerTypeId:$("#trainerTypeId").val(),address:$("#address").val(),intro:$("#intro").val(),labels:labels };

                      $.ajax({

                            url:"${ctx}/td/trainer/modify.do",

                          type:"get",

                          data:param,

                          success:function(data){

                              if(data.result=="true"){

                                   new AlertWin().initfn({

                                       "tipscon":data.resultDesc,

                                       "showtime":2000

                                   });

                                   $("#formId")[0].reset();

                                   addWin.close();

                               }else{

                                   new AlertWin().initfn({

                                       "tipscon":data.resultDesc,

                                       "showtime":2000

                                   });

                               }

                              //table.load();

                              table.load({"pageBean.pageNo": 1,name: $.trim($("#search_name").val()),trainerTypeId:$("#search_trainerTypeId").val() } );

                          }

                      });

                     }else{

                         //新增

                         var labels = "";

                      var index = 0;

                      $(".labels").find("li").each(function(){

                          if(index==0){

                              labels += "'" + $(this).attr("data-id") + "'";

                          }else{

                              labels += ",'"+$(this).attr("data-id") + "'";

                          }

                          index++;

                      });

                      var param={headImg:$("#head_img").attr("data-img"),name:$("#name").val(),title:$("#title").val(),phone:$("#phone").val(),email:$("#email").val(),proField:$("#proField").val(),trainerTypeId:$("#trainerTypeId").val(),address:$("#address").val(),intro:$("#intro").val(),labels:labels };

                      $.ajax({

                            url:"${ctx}/td/trainer/insert.do",

                          type:"get",

                          data:param,

                          success:function(data){

                              if(data.result=="true"){

                                   new AlertWin().initfn({

                                       "tipscon":data.resultDesc,

                                       "showtime":2000

                                   });

                                   $("#formId")[0].reset();

                                   addWin.close();

                               }else{

                                   new AlertWin().initfn({

                                       "tipscon":data.resultDesc,

                                       "showtime":2000

                                   });

                               }

                              //table.load();

                              table.load({"pageBean.pageNo": 1,name: $.trim($("#search_name").val()),trainerTypeId:$("#search_trainerTypeId").val() } );

                          }

                      });

                     }

                 }

          });

五、Java后台代码：

/**

     *

     * @Title: uploadHeadImg

     * @Description: 上传头像

     * @param @param file

     * @param @param xCoordinate

     * @param @param yCoordinate

     * @param @param width

     * @param @param imgName

     * @param @param height

     * @param @param request

     * @param @param model

     * @param @return

     * @return String

     * @throws

     */

    @RequestMapping(value = "/uploadHeadImg", produces = "text/plain;charset=UTF-8")

    @ResponseBody

    public String uploadHeadImg(@RequestParam(value = "img", required = false) MultipartFile file,

            @RequestParam(value = "xCoordinate", required = false) Integer xCoordinate,

            @RequestParam(value = "yCoordinate", required = false) Integer yCoordinate,

            @RequestParam(value = "width", required = false) Integer width,

            @RequestParam(value = "imgName", required = false) String imgName,

            @RequestParam(value = "height", required = false) Integer height, HttpServletRequest request, ModelMap model) {

        String result = "";

        EmpMessageRes msg = new EmpMessageRes();

        //获得工程下面upload资源包路径，当然这个包是已经存在的了

        String path = request.getSession().getServletContext().getRealPath("upload/trainer_picture");

        //上传的图片的名称

        String fileName = file.getOriginalFilename();

        String newfileName = UUIDUtil.generateGUID() + fileName.substring(fileName.lastIndexOf(".")).toLowerCase();

        //下面是upload路径盘符的转化

        StringBuffer importPath = new StringBuffer();

        String temp[] = path.split("\\\\");

        for (int i = 0; i < temp.length; i++) {

            importPath.append(temp[i]);

            importPath.append("/");

        }

        importPath.append(newfileName);

        //看是否存在upload包，没有则会新建一个upload包，作为资源上传的路径

        File targetFile = new File(path, newfileName);

        if (!targetFile.exists()) {

            targetFile.mkdirs();

        }

        try { //文件上传

            file.transferTo(targetFile);

            /**

             *利用工具类对图片进行裁剪

             */
　　　　　　　　/**

            //String name = "D:\\image.jpg";

            if (xCoordinate != null && yCoordinate != null && width != null && height != null) {

                OperateImage o = new OperateImage(xCoordinate, yCoordinate, width, height);

                o.setSrcpath(importPath.toString());

                o.setSubpath(importPath.toString());

                File toCompress = new File(importPath.toString());

                o.cut();

                if (toCompress.length() / 1024 > 50)

                    //将上传的图片进行压缩

                    ImgUtil.createIcon(importPath.toString());

            }
　　　　　　　*/

　　　　　　　 File toCompress = new File(importPath.toString());
   　　　　　  if (toCompress.length() / 1024 > 50){
    　　　　　　　　//将上传的图片进行压缩
   　　　　　　　　ew ImageUtil().thumbnailImage(importPath.toString(), 360, 420, true); //180, 210
   　　　　　　}

            msg.setResult("true");

            msg.setResultDesc("头像上传成功");

            msg.setImgUrl(newfileName);

            //result = "originalFilename=" + fileName + ";imgUrl=" + msg.getImgUrl() + ";result=" + msg.getResult() + ";resultDesc=" + msg.getResultDesc();

            result = msg.getImgUrl();

        } catch (Exception e) {

            msg.setResult("false");

            msg.setResultDesc("头像上传失败");

            e.printStackTrace();

        }

        if (imgName != null) {

            File later = new File(path, imgName);

            if (later != null)

                later.delete();

        }

        return result;

    }

效果如图：

生成缩略图：

package com.dayhr.web.module.hr.td.elearn.common.util;

import java.awt.Color;

import java.awt.Graphics;

import java.awt.Image;

import java.awt.image.BufferedImage;

import java.io.File;

import java.io.IOException;

import java.util.Arrays;

import javax.imageio.ImageIO;

/**

 *

 * @ClassName：ImageUtil

 * @Description: 生成缩略图

 * @author：

 * @date：2015-3-31 下午3:20:27

 * @version 1.0

 */

public class ImageUtil {

    /**

     *

     * @Title: thumbnailImage

     * @Description: 根据图片路径生成缩略图

     * @param @param imgFile  原图片路径

     * @param @param w  缩略图宽

     * @param @param h  缩略图高

     * @param @param force  是否强制按照宽高生成缩略图(如果为false，则生成最佳比例缩略图)

     * @return void

     * @throws

     */

    public void thumbnailImage(String imagePath, int w, int h, boolean force) {

        File imgFile = new File(imagePath);

        if (imgFile.exists()) {

            try {

                // ImageIO 支持的图片类型 : [BMP, bmp, jpg, JPG, wbmp, jpeg, png, PNG, JPEG, WBMP, GIF, gif]

                String types = Arrays.toString(ImageIO.getReaderFormatNames());

                String suffix = null;

                // 获取图片后缀

                if (imgFile.getName().indexOf(".") > -1) {

                    suffix = imgFile.getName().substring(imgFile.getName().lastIndexOf(".") + 1);

                }

                // 类型和图片后缀全部小写，然后判断后缀是否合法

                if (suffix == null || types.toLowerCase().indexOf(suffix.toLowerCase()) < 0) {

                    //System.out.println("Sorry, the image suffix is illegal. the standard image suffix is {}." + types);

                    return;

                }

                Image img = ImageIO.read(imgFile);

                if (!force) {

                    // 根据原图与要求的缩略图比例，找到最合适的缩略图比例

                    int width = img.getWidth(null);

                    int height = img.getHeight(null);

                    if ((width * 1.0) / w < (height * 1.0) / h) {

                        if (width > w) {

                            h = Integer.parseInt(new java.text.DecimalFormat("0").format(height * w / (width * 1.0)));

                            //System.out.println("target image's size, width:" + w+ " height:" + h);

                        }

                    } else {

                        if (height > h) {

                            w = Integer.parseInt(new java.text.DecimalFormat("0").format(width * h / (height * 1.0)));

                            //System.out.println("target image's size, width:" + w+ " height:" + h);

                        }

                    }

                }

                BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);

                Graphics g = bi.getGraphics();

                g.drawImage(img, 0, 0, w, h, Color.LIGHT_GRAY, null);

                g.dispose();

                // 将图片保存在原目录

                ImageIO.write(bi, suffix, imgFile);

            } catch (IOException e) {

                e.printStackTrace();

            }

        }

    }

//    public static void main(String[] args) {

//        new ImageUtil().thumbnailImage("imgs/Tulips.jpg", 100, 150, false);

//    }

}

jquery.upload.js:

var onChooseFile = ''; (function($) {

    var noop = function(){

        return true;

    };

    var frameCount = 0;

    var imgName = '';

    $.uploadDefault = {

        url: '',

        fileName: 'filedata',

        dataType: 'json',

        params: {},

        onSend: noop,

        exten: [],

        onComplate: noop

    };

    $.upload = function(options) {

        var opts = $.extend(jQuery.uploadDefault, options);

        if (opts.url == '') {

            return;

        }

        var canSend = opts.onSend();

        if (!canSend) {

            return;

        }

        var frameName = 'upload_frame_' + (frameCount++);

        var iframe = $('<iframe style="position:absolute;height:0;width:0;" name="'+frameName+'" />');

        var form = $('<form method="post" style="display:none;" target="'+frameName+'" action="'+opts.url+'"  name="form_'+frameName+'" enctype="multipart/form-data" />');

        // 选中文件, 提交表单(开始上传)

        upFile = function(fileInputDOM) {

            imgName = fileInputDOM.value;

            var extension = imgName.match(/\.[^\.]+$/)[0].toLowerCase(),ontest=false;

            if (options.exten !== undefined) {

                for(var i=0;i<options.exten.length;i++){

                    if( extension===options.exten[i] ){

                        ontest=true;

                    };

                };

                if(!ontest){

                    new Tips({

                        "tipscon": "格式为" + options.exten.join("，") + "，请重新选择！"

                    });

                    opts.ie8&&parElement.append(oldElement)

                    return false;

                };

            };

            form.submit(); 

        };

        var oldElement,parElement,fileInput;

        if(opts.ie8){

            oldElement = $('#' + opts.fileElementId),parElement=oldElement.parent();

            $(oldElement).appendTo(form);

        }else{

            // form中增加数据域

            var formHtml = '<input type="file" name="' + opts.fileName + '" onchange="upFile(this)">';

            for (key in opts.params) {

                formHtml += '<input type="hidden" name="' + key + '" value="' + opts.params[key] + '">';

            }

            form.append(formHtml);

        }

        $(document.body).append(form).append(iframe);

        opts.ie8&&upFile(oldElement[0]);

        // iframe 在提交完成之后

        iframe.load(function() {

            var data = $(this).contents().find('body').html();

            opts.onComplate(data, imgName);

            if(!data) return false;

            setTimeout(function() {

                opts.ie8&&parElement.append(oldElement)

                iframe.remove();

                form.remove();

            },300);

        });

        // 文件框

        if(!opts.ie8){

            fileInput = $('input[type=file][name=' + opts.fileName + ']', form);

            fileInput.click();

        }

    };

})(jQuery);

图片上传（方法一：jquery.upload.js）的更多相关文章

上传系列：jquery.upload.js
最近想做一个上传的总结,把自己用过的上传插件都写一写,哪天用到的时候就不用再一次的翻阅资料,现在页面上用到的上传插件,原理上都差不多,那我也就不再废话了,下面我主要记录一下几个比较常用的,由简到繁,这 ...
ASP.NET图片上传（配合jquery.from.js 插件）
前端: js: function AjaxKouBeiShopEdit() { var options = { dataType: "json&q ...
ajax图片上传(asp.net +jquery+ashx)
一.建立Default.aspx页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&q ...
ASP.Net MVC3 图片上传详解（form.js,bootstrap）
图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...
js上传视频（jquery.form.js）
// 上传目标触发点 <input type="file" class="upvideo" name="upvideo" id=&qu ...
微信JS图片上传与下载功能--微信JS系列文章（三）
概述在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
头像文件上传方法一：from表单方法二：ajax
方法一:from表单 html 设置form表单,内包含头像预览div,内包含上传文件input 设置iframe用来调用函数传参路径 <!--表单提交成功后不跳转处理页面,而是将处理数据返回给 ...
基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader
(function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(thi ...
ABAP分享十：文件的上传方法一
前提条件:PARAMETERS P_files TYPE RLGRAP-FILENAME. AT SELECTION-SCREEN ON VALUE-REQUEST FOR P_files.一.文件的 ...
支持图片上传预览的 uploadPreview.js 插件
原文链接:http://www.lanrenzhijia.com/others/3148.html

随机推荐

word record 01
词义默认包括发音 coil /kɔɪl/ 发音(kuo you) collage /kə'lɑʒ/ 发音(ke la shi) colleague /'kɑliɡ/ 发音 (ka li ge) com ...
zookeeper应用：屏障、队列、分布式锁
zookeeper工具类: 获取连接实例:创建节点:获取子节点:设置节点数据:获取节点数据:访问控制等. package org.windwant.zookeeper; import org.apac ...
Shell 常用命令、基本用法总结
Filter Filter 常用于从大量文本.数据中提取需求的部分.下面介绍几个常用的 filter 命令. cut $ cut -c 5-8 textfile.txt # 切出 textfile.t ...
Redis+Keepalived高可用方案详细分析
背景目前,Redis集群的官方方案还处在开发测试中,未集成到稳定版中.且目前官方开发中的Redis Cluster提供的功能尚不完善(可参考官方网站或http://www.redisdoc.com/ ...
Block的声明与定义语法
Block的声明 Block的声明与函数指针的声明类似返回值类型(^变量名)(参数列表) Block的定义 ^返回值类型(参数列表) { 表达式 } 其中: 1 如果返回值类型是void,可以省略 ...
Beta阶段项目展示博客
Beta阶段项目展示团队成员的简介详细见团队简介角色姓名照片项目经理,策划游心策划王子铭策划蔡帜美工赵晓宇美工王辰昱开发.架构师解小锐开发陈鑫开发李金奇开发 ...
<Effective C++>读书摘要--Resource Management<一>
1.除了内存资源以外,Other common resources include file descriptors, mutex locks, fonts and brushes in graphi ...
【Docker 命令】- exec命令
docker exec :在运行的容器中执行命令语法 docker exec [OPTIONS] CONTAINER COMMAND [ARG...] OPTIONS说明: -d:分离模式: 在后台 ...
try-with-resources语句
try-with-resources语句是一种声明了一种或多种资源的try语句.资源是指在程序用完了之后必须要关闭的对象.try-with-resources语句保证了每个声明了的资源在语句结束的时候 ...
使用Windows Live Writer拉取之前写的博客
因为之前写的博客有错误需要修改,但是在Windows Live Writer中找了半天也没找到怎么拉取之前的博客,在[打开本地草稿]或者[打开最近使用过的日志]中,由于存储的项数有限,所以就找不到那篇 ...

图片上传（方法一：jquery.upload.js）

图片上传（方法一：jquery.upload.js）的更多相关文章

随机推荐

热门专题