首页 javaWEB webuploaderjava版 上传图片

webuploaderjava版 上传图片

问题: 1、上传单张 2、修改图片的时候覆盖原来的图片 jsp+springmvc 代码如下 前台代码 <dl&g…

问题:

1、上传单张

2、修改图片的时候覆盖原来的图片

jsp+springmvc

代码如下

前台代码

                             <dl>
					<dt>图片展示:</dt>
					<dd>
						<input name="imgAddress" type="hidden" >
							<div id="uploader-demo">
							    <!--用来存放item-->
							    <div id="fileList" class="uploader-list"></div>
							    <div id="upInfo"></div>
							    <div id="filePicker">选择图片</div>
							</div>
					</dd>
				</dl>

 

<script>
  var baseUrl = '${pageContext.request.contextPath }';
//图片上传demo
jQuery(function() {
   var $ = jQuery,
       $list = $('#fileList'),
       // 优化retina, 在retina下这个值是2
       ratio = window.devicePixelRatio || 1,

       // 缩略图大小
       thumbnailWidth = 100 * ratio,
       thumbnailHeight = 100 * ratio,
       // Web Uploader实例
       uploader;
   // 初始化Web Uploader
   uploader = WebUploader.create({
       // 自动上传。
       auto: true,
       // swf文件路径
       swf:  baseUrl+'js/Uploader.swf',
       // 文件接收服务端。
       server: baseUrl+'/files/addImg',
       // 选择文件的按钮。可选。
       // 内部根据当前运行是创建,可能是input元素,也可能是flash.
       pick: '#filePicker',
    // 图片质量,只有type为`image/jpeg`的时候才有效。
       quality: 90,
       // 只允许选择文件,可选。
       fileNumLimit: 1,
       accept: {
           title: 'Images',
           extensions: 'gif,jpg,jpeg,bmp,png',
           mimeTypes: 'image/*'
       }
   });


// 当有文件添加进来的时候
   uploader.on( 'fileQueued', function( file ) {

       var $li = $(
               '<div id="' + file.id + '" class="file-item thumbnail">' +
                   '<img>' +
                   '<div class="info">' + file.name + '</div>' +
               '</div>'
               ),
           $img = $li.find('img');
       // $list为容器jQuery实例
       $list.html("");
       $list.append( $li );

       // 创建缩略图
       // 如果为非图片文件,可以不用调用此方法。
       // thumbnailWidth x thumbnailHeight 为 100 x 100
       uploader.makeThumb( file, function( error, src ) {
           if ( error ) {
               $img.replaceWith('<span>不能预览</span>');
               return;
           }

           $img.attr( 'src', src );
       }, thumbnailWidth, thumbnailHeight );

       $("#filePicker").on('click',function(){
    	   uploader.removeFile(file);
       });

   });

// 文件上传过程中创建进度条实时显示。
   uploader.on( 'uploadProgress', function( file, percentage ) {
       var $li = $( '#'+file.id ),
           $percent = $li.find('.progress span');

       // 避免重复创建
       if ( !$percent.length ) {
           $percent = $('<p class="progress"><span></span></p>')
                   .appendTo( $li )
                   .find('span');
       }

       $percent.css( 'width', percentage * 100 + '%' );
   });

   // 文件上传成功,给item添加成功class, 用样式标记上传成功。
   //注意我写样式了啊response:服务端返回的数据
   uploader.on( 'uploadSuccess', function( file,response) {
       $( '#'+file.id ).addClass('upload-state-done');
       //console.info(response);
     $("#upInfo").html("<font color='red'>"+response._raw+"</font>");
   });

   // 文件上传失败
   uploader.on( 'uploadError', function(file) {
       var $li = $( '#'+file.id ),
           $error = $li.find('div.error');
       alert(reson);

       // 避免重复创建
       if ( !$error.length ) {
           $error = $('<div class="error"></div>').appendTo( $li );
       }

       $error.text('上传失败!');
   });

   // 完成上传完了,成功或者失败,先删除进度条。
   uploader.on( 'uploadComplete', function( file ) {
       $( '#'+file.id ).find('.progress').remove();
   });
});
</script>

 

后台代码

@RequestMapping(value = "/addImg")
    public void upload(@RequestParam(value = "file", required = false) MultipartFile file,HttpServletResponse response, HttpServletRequest request, ModelMap model) {


		COM_REPORT_PATH=rb.getString("COM_REPORT_PATH");
        System.out.println("开始");
        String path =COM_REPORT_PATH+"/upload/";
        String fileName = file.getOriginalFilename();
//        String fileName = new Date().getTime()+".jpg";
        System.out.println(path);
        File baseFile = new File(path);
		File targetFile = new File(baseFile, fileName);

		long size=0;
		if(!baseFile.exists()){
			baseFile.mkdirs();
        }

        //保存
        try {
            file.transferTo(targetFile);
            size  = file.getSize();
        } catch (Exception e) {
            e.printStackTrace();
        }
        System.out.println(path+fileName);
        model.addAttribute("fileUrl", path+fileName);

    	PrintWriter out;
		try {
			request.setCharacterEncoding("utf-8");
			response.setCharacterEncoding("utf-8");
			out = response.getWriter();

//			out.println("文件上传成功. 已保存为: " + path + "." + fileName
//					+ " &nbsp;&nbsp;文件大小: " + size + "字节<p />");
			out.println("<input type='hidden' name='imgaddress' value='"+ path + "." + fileName+"'>");
		} catch (IOException e) {

			e.printStackTrace();
		}

    }

 

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

为您推荐

nodejs 整理记录

nodejs 整理记录

下载包 https://blog.csdn.net/m0_59878114/article/details/120274...
websocket测试html

websocket测试html

<!DOCTYPE html> <html> <head> <meta cha...
bigdemical两个数比较大小

bigdemical两个数比较大小

/*int result = bigdemical1.compareTo(bigdemical2) result = -...
Beetl2.7 中文文档

Beetl2.7 中文文档

Beetl目前版本是2.7.23,相对于其他java模板引擎,具有功能齐全,语法直观,性能超高,以及编写的模板容易维护等...
纯CSS实现多个便签在一行展示,拖动滚动

纯CSS实现多个便签在一行展示,拖动滚动

div <h2>请注意需要在移动端预览,PC端拖拽无效果</h2> <div class=...
返回顶部