精华内容
下载资源
问答
  • Webuploader图片上传

    2018-04-24 14:44:56
    刚换了家公司,入职没几天就丢给我一个新需求,要添加一个图片上传功能,废话不多说,先上效果图:webuploader快速搭建官网已经写的很简单,官网链接:点击打开链接; 参考着官方文档自己搭建先引入webuploader的js...

    前言:最近换了一份工作,做开发两年多了,总觉得输入了好多知识点,没有总结和输出,所以尝试着把自己用过得一些技术点通过博客的方式记录下来,见证一下自己的成长。

    刚换了家公司,入职没几天就丢给我一个新需求,要添加一个图片上传功能,废话不多说,先上效果图:

    webuploader快速搭建官网已经写的很简单,官网链接:点击打开链接

     参考着官方文档自己搭建

    先引入webuploader的js和css(jquery当然也是少不了的):

    <link href="../weixin/css/webuploader.css" rel="stylesheet" type="text/css" />
    <script src="../weixin/js/webuploader.nolog.js" type="text/javascript"></script>

    js代码:

    // 微信端图片上传
    var thumbnailWidth = 60;   //缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算
    var thumbnailHeight = 60;
    $(function() {
        var uploader = WebUploader.create({
            // 选完文件后,是否自动上传。
            auto: true,
            // swf文件路径
            swf: '../weixin/swf/Uploader.swf',
            // 文件接收服务端。
            server: '../servlet/upload.servlet',
            // 选择文件的按钮。可选。
            pick: '#filePicker',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/'
            }
        });
    
        //busiDataId 和文件类型
        uploader.on('uploadBeforeSend', function (obj, data) {
            data = $.extend(data, {
                "busiDataId": "${busiData.id}",
                "imgType": "IMG"
            });
        });
    
        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div style="position:relative" id="' + file.id + '" class="cp_img">' +
                    '<a href="javascript:;" class="delete" style=" position: absolute; top: -10px; right: 5px;border-radius:11px;'+
                    'background:red; color:white; border:none; font-size: 40px; line-height: 13px;display: none">-</a>'+
                    '<img>' +
                    '</div>'
                ),
                $img = $li.find('img');
    
            // $list为容器jQuery实例
            $("#fileList").before( $li);
    
            // 创建缩略图
            // 如果为非图片文件,可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight  100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
    
                $img.attr( 'src', src );
                $img.css({
                    float:'left',
                    marginRight:'5px',
                    marginTop:'5px'
                });
            }, thumbnailWidth, thumbnailHeight );
        });
    
        // 文件上传成功,显示删除按钮并且赋值数据表单ID    uploader.on( 'uploadSuccess', function( file,response ) {
            var idText = response._raw;
            var attaId = eval('(' + idText + ')').id;
            $( '#'+file.id).attr("value",attaId);
            $( '#'+file.id).find("a").css("display","block");
        });
    
        //执行删除方法
        $("#uploader-demo").on("click", ".delete", function ()
        {
            if (confirm("确定删除该图片?") == true) {
                var value = $(this).parent().attr("value");
                var ida = $(this).parent().attr("id");
                //删除该图片
                uploader.removeFile(uploader.getFile(ida, true));
                $(this).parent().remove();
                $.ajax({
                    type:"get",
                    url: '../attach/attach!deleteFile.action?id=' + value,
                    success: function(data){
                        <%--alert("图片删除成功!");--%>
                    }
                });
            }
        });
    });

    jsp:

    <li style="height: auto; position: relative;"><em>添加图片:</em>
       <!--dom结构部分-->
       <div id="uploader-demo">
          <!--用来存放item-->
          <div id="fileList" class="uploader-list">
             <div id="filePicker" style="float: left;">+</div>
          </div>
       </div>
    </li>

    上传文件的后台代码之前是用servlet,沿用以前,这里上传除了图片以外,我还需要传一个busiDataID和imgType,这里需要用到调用这个函数,

    //busiDataId 和文件类型
        uploader.on('uploadBeforeSend', function (obj, data) {
            data = $.extend(data, {
                "busiDataId": "${busiData.id}",
                "imgType": "IMG"
            });
        });

    后台servlet代码:

          response.setContentType("text/html;charset=utf-8");
          PrintWriter out = null;
          try {
             
             out = response.getWriter();
             // 实例化一个硬盘文件工厂,用来配置上传组件ServletFileUpload
             DiskFileItemFactory dfif = new DiskFileItemFactory();
             dfif.setSizeThreshold(4096);// 设置上传文件时用于临时存放文件的内存大小,这里是4K.多于的部分将临时存在硬盘
             File tmpPath = new File(saveFileBase + ".TempFile");
             log.info("log4j tmpPath "+tmpPath);
             if (!tmpPath.exists()) {
                tmpPath.mkdirs();
             }
             dfif.setRepository(tmpPath);// 设置存放临时文件的目录
             // 用以上工厂实例化上传组件
             ServletFileUpload sfu = new ServletFileUpload(dfif);
             sfu.setHeaderEncoding("UTF-8");
             // 设置最大上传尺寸
             sfu.setSizeMax(maxFileSize);
             // // request得到 所有 上传域的列表
              List<FileItem> fileList = sfu.parseRequest(request);
                
              // 没有文件上传,直接返回
              if (fileList == null || fileList.isEmpty()) {
                log.info("log4j UploadServlet  :"+createRstXml(attachId,"",state,""));
                 return;
              }
             String busiDataId = null;
              //图片类型
              String imgType = null;
              for(FileItem fileItem: fileList) {
              if (fileItem == null || fileItem.isFormField()) {
                 String fieldName = fileItem.getFieldName();
                 if(fieldName.equals("orgCode")){
                    orgCode = fileItem.getString("utf-8");
                 }else if(fieldName.equals("busiDataId")){
                    busiDataId = fileItem.getString("utf-8"); //接收busiDataId
                 }else if(fieldName.equals("fileType")){
                    busiDataType = fileItem.getString("utf-8");
                 } else if (fieldName.equals("imgType")) {
                    imgType = fileItem.getString("utf-8");  //接收ImgType
                 }
              }else{
                 originalName = fileItem.getName();
                 inputStream = fileItem.getInputStream();
              }
              
              }
          
             // 得到去除路径的文件名
             String fileName = getName(originalName);
             // 保存的最终文件完整路径
             String fullPath = saveFileBase + relativePath;
             log.info("log4j fullPath:"+fullPath);
             System.out.println("System.out fullPath :"+fullPath);
             size = inputStream.available();
    
           //拷贝两份 一份用作异步把上传的图片保存到本地,一个用作上传到FTP(遇到的一个坑,异步inputStream用read方法读取数据后,ftp无法读取到数据)
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            byte[] buffer = new byte[2048];
            int len;
            while ((len = inputStream.read(buffer)) > -1 ) {
               baos.write(buffer, 0, len);
            }
            baos.flush();
            InputStream stream1 = new ByteArrayInputStream(baos.toByteArray());
            InputStream stream2 = new ByteArrayInputStream(baos.toByteArray());
            baos.close();
    //异步把上传的图片保存到本地 String path = request.getSession().getServletContext().getRealPath("/"); String imgPath = path + File.separator + "imgTmp"; //创建一个临时文件夹存放图片 File file = new File(imgPath); if (!file.exists()) file.mkdir(); //项目路径 String filePath = file.getAbsolutePath() + File.separator; if (StringUtil.isNotBlank(imgType) && "IMG".equals(imgType)) new UploadFileToWebService(fileName,filePath,inputStream);

    图片原本是上传到ftp上的,这里需要先上传一份到项目路径下用于后面的数据回显,具体是通过数据库附件表+文件名进行关联,我简单实现一个异步上传功能:

    /**
     * 异步上传图片到web服务器工作目录下 用于微信端上传图片
     */
    public class UploadFileToWebService implements Runnable{
        private String fileName;
        private InputStream inputStream;
        private String filePath;
    
        public UploadFileToWebService(String fileName,String filePath,InputStream inputStream) {
            this.fileName = fileName;
            this.filePath = filePath;
            this.inputStream = inputStream;
            Thread thread = new Thread(this);
            thread.start();
        }
    
        @Override
        public void run() {
            OutputStream os = null;
            try {
                os = new FileOutputStream(new File(filePath + fileName));
                byte[] buf =new byte[2048];
                int byteReads;
                while ((byteReads=inputStream.read(buf)) > 0) {
                    os.write(buf,0,byteReads);
                }
    
            } catch (IOException e) {
                e.printStackTrace();
            } finally {
                try {
                  inputStream。close();
                    os.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
    
            }
        }
    }
    

    后话:样式全部写在了js代码里面,实在不雅,布局对于一个后台程序员真是百般折磨,我这个也是通过公司前端老哥的努力才布好的局。

    展开全文
  • webUploader图片上传

    2019-09-11 20:31:30
    <td>资料图片<span style="color: red;...(图片存储的位置以上传的为基础,后台查看放大图片为了显示可能会进行位置改变)</span></td> <td colspan="7"> ...
     <td>资料图片<span style="color: red;">(图片存储的位置以上传的为基础,后台查看放大图片为了显示可能会进行位置改变)</span></td>
    				    <td colspan="7">
    				    	<div style="width:900px;">
    				    		<!-- 放图片的容器 -->
    				    		<div style="width:900px;">
    				    			<ul id="dragList" class="sortable grid">
    				    				<c:if test="${not empty pictureList}">
    					    				<c:forEach var="item" items="${pictureList}" varStatus="status">
    							  				<li>
    												<div>
    													<div class="dragDivImage">
    														<img width="100px" height="75px" src="${ctxUserFiles}/${item.minImage}" title="${item.fileName}">
    													</div>
    													<div class="dragDivFd">
    														<a rel="group" href="${ctxUserFiles}/${item.Image}" title="${item.fileName}">
    															<img src="${ctxStatic}/dragsort/images/fd.jpg" width="45px" height="20px">
    														</a>
    													</div>
    													<div class="dragDivSc">
    														<a href="javascript:" onclick="delImg(this)">
    															<img src="${ctxStatic}/dragsort/images/sc.jpg" width="45px" height="20px">
    														</a>
    													</div>
    												</div>
    													<input type="hidden" name="imagePath" value="${item.Image}">
    													<input type="hidden" name="minImagePath" value="${item.minImage}">
    													<input type="hidden" name="fileName" value="${item.fileName}">
    											</li>
    							  			</c:forEach>
    				    				</c:if>
    				    			</ul>
    				    		</div>
    				    		<!-- 放上传按钮的容器 -->
    				    		<div style="float: left;width: 900px;" id="filePicker">选择图片</div>
    				    	</div>
    				    </td>
    <link type="text/css" rel="stylesheet" href="${ctxStatic}/webuploader/css/webuploader.css"/>
    		
    		<!-- 图片集 -->
    		<link type="text/css" rel="stylesheet" href="${ctxStatic}/fancybox/css/fancybox.css"/>
    <style type="text/css">
    			.sortable {
    				margin: auto;
    				padding: 0;
    				width: 800px;
    				-webkit-touch-callout: none;
    				-webkit-user-select: none;
    				-khtml-user-select: none;
    				-moz-user-select: none;
    				-ms-user-select: none;
    				user-select: none;
    			}
    			.sortable.grid {
    				overflow: hidden;
    			}
    			.sortable li {
    				list-style: none;
    				border: 1px solid #CCC;
    				background: #F6F6F6;
    				font-family: "Tahoma";
    				color: #1C94C4;
    				margin: 5px;
    				padding: 5px;
    /* 				height: 22px; */
    			}
    			.handles span {
    			cursor: move;
    			}
    			.sortable li.disabled {
    				opacity: 0.5;
    			}
    			.sortable.grid li {
    /* 				line-height: 80px; */
    				float: left;
    				width: 108px;
    				height: 108px;
    				text-align: center;
    			}
    			.sortable li.highlight {
    				background: #FEE25F;
    			}
    			.sortable li.sortable-placeholder {
    				border: 1px dashed #CCC;
    				background: none;
    			}
    			.sortable li>div { width:101px; height:96px; border:solid 1px black; background-color:rgb(45,175,235); text-align:center;  }
    			.dragDivImage {width: 100px;height: 75px;overflow: hidden;z-index:-1;}
    			.dragDivFd {float: left;width: 45px;height: 20px;overflow: hidden;z-index:0;}
    			.dragDivSc {float: right;width: 45px;height: 20px;overflow: hidden;z-index:0;}
    		</style>
     <td>资料图片<span style="color: red;">(图片存储的位置以上传的为基础,后台查看放大图片为了显示可能会进行位置改变)</span></td>
    				    <td colspan="7">
    				    	<div style="width:900px;">
    				    		<!-- 放图片的容器 -->
    				    		<div style="width:900px;">
    				    			<ul id="dragList" class="sortable grid">
    				    				<c:if test="${not empty pictureList}">
    					    				<c:forEach var="item" items="${pictureList}" varStatus="status">
    							  				<li>
    												<div>
    													<div class="dragDivImage">
    														<img width="100px" height="75px" src="${ctxUserFiles}/${item.minImage}" title="${item.fileName}">
    													</div>
    													<div class="dragDivFd">
    														<a rel="group" href="${ctxUserFiles}/${item.Image}" title="${item.fileName}">
    															<img src="${ctxStatic}/dragsort/images/fd.jpg" width="45px" height="20px">
    														</a>
    													</div>
    													<div class="dragDivSc">
    														<a href="javascript:" onclick="delImg(this)">
    															<img src="${ctxStatic}/dragsort/images/sc.jpg" width="45px" height="20px">
    														</a>
    													</div>
    												</div>
    													<input type="hidden" name="imagePath" value="${item.Image}">
    													<input type="hidden" name="minImagePath" value="${item.minImage}">
    													<input type="hidden" name="fileName" value="${item.fileName}">
    											</li>
    							  			</c:forEach>
    				    				</c:if>
    				    			</ul>
    				    		</div>
    				    		<!-- 放上传按钮的容器 -->
    				    		<div style="float: left;width: 900px;" id="filePicker">选择图片</div>
    				    	</div>
    				    </td>
    // 图片集
    		$("a[rel=group]").fancybox({
    			'titlePosition' : 'over',
    			'cyclic'        : true,
    			'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
    						return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    					}
    		});
    			
    	});
    		
    		function delImg(obj){
    			var result = confirm('确定删除此图片吗?');  
    			if(result){  
    				$(obj).parent().parent().parent().remove();
    		        alert('删除成功!');  
    		    }
    		    return true;
    		}
    
    
    <script type="text/javascript">
    		$(document).ready(function(){
    			//var $ = jQuery;
    		   var $list = $('#dragList'),
    		     // 优化retina, 在retina下这个值是2
    		     ratio = window.devicePixelRatio || 1,
    		
    		     // Web Uploader实例
    		     uploader;
    			
    			
    // 			$("#dragList").dragsort({
    // 			    dragSelector: "li",
    // 			    dragEnd: function() { },
    // 			    dragBetween: false,
    // 			    placeHolderTemplate: "<li></li>"
    // 			});
    
    			// 图片拖拽JS
    			$('.sortable').sortable();
    			
    			 // 初始化Web Uploader
    			 uploader = WebUploader.create({
    			
    			     // 自动上传。
    			     auto: true,
    			
    			     // swf文件路径
    			     swf: '${ctxStatic}/webuploader/Uploader.swf',
    			
    			     // 文件接收服务端。
    			     server: '${ctx}/uploadify/upload',
    			
    			     // 选择文件的按钮。可选。
    			     // 内部根据当前运行是创建,可能是input元素,也可能是flash.
    			     pick: '#filePicker',
    			     
    			     // 是否容许重复上传
    			     duplicate:true,
    			     
    			     // 允许最大上传进程数
    			     threads:1,
    			     
    			     // 上传图片不进行压缩,原样上传
    			     compress:false,
    				
    				// 上传单个图片的大小限制500KB
    				fileSingleSizeLimit:500*1024,
    			
    			     // 只允许选择文件,可选。
    			     accept: {
    			         title: 'Images',
    			         extensions: 'gif,jpg,jpeg,bmp,png',
    			         mimeTypes: 'image/*'
    			     }
    			 });
    			 
    			 // 进行错误判断提示
    			 uploader.on('error',function(type){
    			 	 if (type=="Q_TYPE_DENIED"){
    			 	 	alert("上传的图片文件格式为:gif,jpg,jpeg,bmp,png");
    			 	 }else if(type=="F_EXCEED_SIZE"){
    			 	 	alert("图片的大小请不要超过500KB");
    			 	 }
    			 });
    			
    			 // 当有文件添加进来的时候
    			 uploader.on( 'fileQueued', function( file ) {
    			 
    			     // 创建li元素块
    			     var li = '';
    				    li+='<li id="' + file.id + '">';
    	   				li+='<div>';
    	   				li+='<div class="dragDivImage"><img width="100px" height="75px"></div>';
    					li+='<div class="dragDivFd"><a rel="group"><img src="${ctxStatic}/dragsort/images/fd.jpg" width="45px" height="20px"></a></div>';
    					li+='<div class="dragDivSc"><a href="javascript:" onclick="delImg(this)"><img src="${ctxStatic}/dragsort/images/sc.jpg" width="45px" height="20px"></a></div>';
    					li+='</div>';
    					li+='</li>';
    					
    				  var $li = $(li);
    // 			      $img = $($li.find('img').get(0));
    			         
    			     $list.append($li);
    			
    			     // 创建缩略图
    // 			     uploader.makeThumb( file, function( error, src ) {
    // 			         if ( error ) {
    // 			             $img.replaceWith('<span>不能预览</span>');
    // 			             alert("上传失败!");
    // 			             $li.remove();
    // 			             return;
    // 			         }
    			         
    // 			         if(src.length==0){
    // 			          alert("上传失败!");
    // 			             $li.remove();
    // 			             return;
    // 			         }
    			         
    // 			       $img.attr( 'src', src ).attr('title', file.name);
    // 			     }, thumbnailWidth, thumbnailHeight );
    			 });
    			
    			 // 文件上传过程中创建进度条实时显示。
    			 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, 用样式标记上传成功。
    			 uploader.on( 'uploadSuccess', function( file,json) {
    			 	//var result = $.parseJSON(data);
    				//alert(json.path);
    				//alert(file.id);
    
    			 	//上传成功,追加的元素体
    			 	$li = $('#'+file.id);
    			 	
    			 	// 缩略图容器
    			 	$img = $($li.find('img').get(0));
    			 	
    			 	// 图片集容器
    			 	$a = $($li.find('a').get(0));
    			 	
    			 	// 进行缩略图数据填充
    			 	$img.attr('src','${ctxUserFiles}/'+json.minPath).attr('title', file.name);
    			 	
    			 	$a.attr('href','${ctxUserFiles}/'+json.path).attr('title', file.name);
    			 	
    				var html = '';
    				// 上传原始文件隐藏域
    			    html += '<input type="hidden" name="imagePath" value="'+json.path+'"/>';
    			    // 上传小图片隐藏域
    			    html += '<input type="hidden" name="minImagePath" value="'+json.minPath+'"/>';
    			    // 上传文件名
    			     html += '<input type="hidden" name="fileName" value="'+file.name+'"/>';
    			    
    			    $li.append(html);
    			    
    			    // 图片集
    				$("a[rel=group]").fancybox({
    					'titlePosition' : 'over',
    					'cyclic'        : true,
    					'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
    								return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    							}
    				});
    				
    				// 图片拖拽JS
    				$('.sortable').sortable();
    			    
    			 });
    			
    			 // 文件上传失败,现实上传出错。
    			 uploader.on( 'uploadError', function( file ) {
    			     var $li = $( '#'+file.id );
    			     $li.remove();
    			     alert(file.name+"上传失败!");
    			 });
    			
    			 // 完成上传完了,成功或者失败,先删除进度条。
    			 uploader.on( 'uploadComplete', function( file ) {
    			     $( '#'+file.id ).find('.progress').remove();
    			 });
    		});
    	</script>
    
    
    
    
    
    @ResponseBody
    	@RequestMapping(value="/upload")
    	public Map<String,String> upload(HttpServletRequest request, HttpServletResponse response) throws Exception{
    		String newFileName="";
    		String extName = "";
    		String responseStr="";
    		HashMap<String, String> resultMap = new HashMap<String, String>();
    		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    		Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();    
    		//String savePath = this.getServletConfig().getServletContext().getRealPath("");
    		        //savePath = savePath + "/uploads/";
    		// 文件保存路径  ctxPath本地路径
    		String ctxPath=request.getSession().getServletContext().getRealPath("/")+"userfiles";
    		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");  
    		String ymd = sdf.format(new Date());  
    		ctxPath += File.separator + ymd + File.separator;  
    		System.out.println("ctxpath="+ctxPath);
    		// 创建文件夹  
    		File file = new File(ctxPath);    
    		if (!file.exists()) {    
    		file.mkdirs();    
    		}
    		String fileName = null;    
    		for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {    
    		// 上传文件   
    		MultipartFile mf = entity.getValue();  
    		fileName = mf.getOriginalFilename();//获取原文件名  
    		System.out.println("filename="+fileName);
    		// 扩展名格式:
    		if (fileName.lastIndexOf(".") >= 0) {
    			extName = fileName.substring(fileName.lastIndexOf("."));
    		}
    		newFileName = UUID.randomUUID().toString();
    		File uploadFile = new File(ctxPath + newFileName + extName);
    		try {  
    		  FileCopyUtils.copy(mf.getBytes(), uploadFile);  
    		  
    		   responseStr="上传成功";
    		   // 图片上传成功,生成缩略图
    		   Thumbnails.of(uploadFile).size(226, 226).toFile(new File(ctxPath + newFileName+"_Min"+ extName));
    		   
    		   resultMap.put("minPath", ymd +"/"+newFileName+"_Min"+extName);
    		   
    		   } catch (IOException e) {  
    		   	responseStr="上传失败";  
    		       e.printStackTrace();  
    		       }
    		}   
    		 resultMap.put("path", ymd +"/"+newFileName+extName);
    		return resultMap;
    	}
    	

    <script type="text/javascript" src="${ctxStatic}/webuploader/js/webuploader.js"></script>
            
            <!-- 图片集 -->
            <script type="text/javascript" src="${ctxStatic}/fancybox/js/jquery.fancybox-1.3.1.pack.js"></script>
            
            <!-- 图片拖拽插件 -->
    <!--         <script type="text/javascript" src="${ctxStatic}/dragsort/js/jquery.dragsort-0.5.2.min.js"></script> -->
            <script type="text/javascript" src="${ctxStatic}/sortable/jquery.sortable.min.js"></script>

    转载于:https://my.oschina.net/u/2481007/blog/886991

    展开全文
  • WebUploader 图片上传三种实例,基于ASP.NET 环境写了三个DEMO,分别为 直接上传,简单上传,模态框上传
  • WebUploader图片上传实例

    千次阅读 热门讨论 2017-12-18 19:18:22
    WebUploader 图片上传实例, 三种常用的样式 及 常用逻辑封装

    webuploader-1.1.5 图片上传实例

    本插件基于 webuploader插件 进行了封装,提供了三种常用视图,并对常用上传功能进行了JS封装,视图,样式,业务逻辑都已封装(JS),可以直接引入使用。

    主要提供了两个版本

    版本1(模态框上传) : 支持拖拽,支持粘贴,支持模态框,支持预览,支持断点,支持删除,旋转

    效果一

    效果二

    版本2 (简单上传): 简单上传,支持预览

    效果:
    简单上传效果1

    简单上传效果2

    使用说明

    1. 模态框上传步骤:

    直接引入 _view.html里代码即可,所需要的所有代码,已写在了 _view.html代码里

    以下是思路:

    一、: 引入资源

        <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
        <link href="../vendors/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
        <link href="../vendors/pnotify/dist/pnotify.custom.min.css" rel="stylesheet" />
        <script src="../vendors/jquery/dist/jquery.min.js"></script>
    
    
        <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="../vendors/webuploader-0.1.5/webuploader.min.js"></script>
        <script src="../vendors/pnotify/dist/pnotify.custom.min.js"></script>
        <script src="../vendors/webuploader-0.1.5/upload.js"></script>

    二、初始化

    1. 视图 和 初始化脚本实例 已放置在 _view.html 中。
    <!--模态框 单独模块-->
    <div id="imgModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="width: 900px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">上传图片</h4>
                </div>
                <div class="modal-body model-scroll" style="max-height: 500px;">
                    <!--上传图片start-->
                    <div id="wrapper">
                        <div id="container">
                            <div id="uploader">
                                <div class="queueList">
                                    <div id="dndArea" class="placeholder">
                                        <div id="filePicker"></div>
                                        <p>或将照片拖到这里,并支持截图粘贴功能</p>
                                    </div>
                                </div>
                                <div class="statusBar" style="display: none;">
                                    <div class="progress">
                                        <span class="text">0%</span>
                                        <span class="percentage"></span>
                                    </div>
                                    <div class="info"></div>
                                    <div class="btns">
                                        <div id="filePicker2"></div>
                                        <div class="uploadBtn">开始上传</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--上传图片end-->
                </div>
            </div>
        </div>
    </div>
    <button id="openUpload" type="button" class="btn btn-primary" data-toggle="modal" data-target="#imgModal">上传图片</button>
    2. JS 思路就是初始化上传方法。

    我已封装好的上传方法,需要提供回调方法的参数;并监听模态框,实例的代码即可。

    <script>
        $(function () {
            var callback = function (response) {
                if (response.Status == 200) {
                    new PNotify({ title: "成功!", text: response.Message, type: 'success' });// 此处使用了Pnotify 插件== alert
                } else {
                    new PNotify({ title: "失败!", text: response.Message, type: 'error' });
                }
            };
    
    
            //打开模态框-初始化图片插件
            $('#imgModal').on('shown.bs.modal', function () {
                _init_upload(callback);
            });
            //关闭模态框-销毁对象         
            $('#imgModal').on('hidden.bs.modal', function () {
                if (typeof (uploader) != "undefined") {
                    uploader._destroy();
                }
            });
        });
    </script>
    

    简单按钮上传

    这一种比较简单,可以直接使用 _view_simple.html,而后执行 _init_simpleUpload方法即可。

    一、: 引入资源

    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../vendors/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="../vendors/pnotify/dist/pnotify.custom.min.css" rel="stylesheet" />
    <link href="../vendors/webuploader-0.1.5/style_simple.css" rel="stylesheet" />
    <script src="../vendors/jquery/dist/jquery.min.js"></script>
    <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../vendors/webuploader-0.1.5/webuploader.min.js"></script>
    <script src="../vendors/pnotify/dist/pnotify.custom.min.js"></script>
    <script src="upload_simple.js"></script>
    
    <!--_view_simple.html html 代码-->

    二、视图代码

    <!--简单模块-->
    <div class="container form-horizontal">
        <div class="row form-group">
            <label class="control-label  col-lg-3 col-md-3">图片地址</label>
            <div class="col-lg-5 col-md-6">
                <input class="form-control" name="askImage" id="askImage" disabled="disabled" style="max-width:100%;" />
            </div>
            <div id="uploadImg">上传图片</div>
            @*<button type="button" class="btn btn-primary">上传图片</button>*@
        </div>
        <div id="fileList" class="uploader-list  wu-example"></div>
    </div>
    

    三、 初始化上传方法

    
    <script>
        $(function () {
            //Test
            _init_simpleUpload();//初始化上传方法
        })
    </script>

    注意事项

    1. 在使用模态框上传的时候,有一个特别需要注意的地方 : 打开模态框 ,上传按钮无法点击的情况,再次打开,按钮可点了

    解决方案:

    webuploader 初始化必须要在 按钮处于显示状态才能完成初始化。 所以,我们打开模态框的时候,再去初始化 webuploader, 为了防止重复初始化,我在 upload.js 里封装了 销毁的方法, 关闭模态框的时候,执行销毁操作。

    下载链接:

    C# Demo 下载链接 : https://github.com/wangyushuai/WebUploader-Demos.git
    java demo 下载链接: https://github.com/wangyushuai/demo_ssm.git
    csdn下载链接: http://download.csdn.net/download/shuai_wy/10163529

    在DEMO 里,实际上我写了 三个 DEMO ,除了上面的两种,还提供了一种 直接上传的DEMO

    展开全文
  • WebUploader 图片上传插件 前后端 C#代码
  • webuploader图片上传下载,PHP服务传输机制,Wampserver64部署后可直接运行。
  • 图片上传几乎是应用必备,前面也针对kartik 的 fileinput做了一篇详细的说明,不过很多人反馈各种问题,下面针对webuploader的使用单独写了一个组件。该组件可以更好的处理 Yii2 在图片上传过程中带来的一系列问题,...

    图片上传几乎是应用必备,前面也针对 kartik 的 fileinput 做了一篇详细的说明,不过很多人反馈各种问题,下面针对 webuploader的使用单独写了一个组件。该组件可以更好的处理 Yii2 在图片上传过程中带来的一系列问题,目前支持多图多字段多modal的混合上传。

    介绍之前我们先演示下效果。

    安装

    推荐使用composer进行安装

    $  composer require bailangzhan/yii2-webuploader dev-master
    

    使用

    params.php或者params-local.php内增加webuploader和domain配置项

    // 图片服务器的域名设置,拼接保存在数据库中的相对地址,可通过web进行展示
    'domain' => 'http://ceshi_admin.com/',
    'webuploader' => [
        // 后端处理图片的地址,value 是相对的地址
        'uploadUrl' => 'blog/upload',
        // 多文件分隔符
        'delimiter' => ',',
        // 基本配置
        'baseConfig' => [
            'defaultImage' => 'http://ceshi_admin.com/it/u=2056478505,162569476&fm=26&gp=0.jpg',
            'disableGlobalDnd' => true,
            'accept' => [
                'title' => 'Images',
                'extensions' => 'gif,jpg,jpeg,bmp,png',
                'mimeTypes' => 'image/*',
            ],
            'pick' => [
                'multiple' => false,
            ],
        ],
    ],

    webuploader['baseConfig'] 参考 webuploader官方的参数说明

    视图文件

    单图

    <?php 
        echo $form->field($model, 'file')->widget('manks\FileInput', [
        ]); 
    ?>

    多图

    <?php 
    echo $form->field($model, 'file2')->widget('manks\FileInput', [
        'clientOptions' => [
            'pick' => [
                'multiple' => true,
            ],
            // 'server' => Url::to('upload/u2'),
            // 'accept' => [
            //     'extensions' => 'png',
            // ],
        ],
    ]); ?>

    控制器 controller的地址可以在params.php或者params-local.php中配置 Yii::$app->params['webuploader']['uploadUrl'], 也可以在 clientOptions中配置 server 项。控制器需要返回的数据格式如下

    // 错误时
    {"code": 1, "msg": "error"}
    // 正确时, 其中 attachment 指的是保存在数据库中的路径,url 是该图片在web可访问的地址
    {"code": 0, "url": "http://ceshi_admin/图片地址", "attachment": "图片地址"}

    clientOptions同样参考 webuploader官方的参数说明

    注意

    1. 如果是修改的多图片操作,务必保证 $model->file = 'src1,src2,src3,...'; 或者 $model->file = ['src1', 'src2'. 'src3', ...];

    -------------------------------------------------------------------------------------------------------

    下面介绍下yii2后端的处理方案

    首先假设webuploader是按照前面所配置的,控制器就是 blog/upload,先看下 BlogController的实现

    use common\components\Upload;
    use yii\helpers\Json;
    
    
    public function actionUpload()
    {
        try {
            $model = new Upload();
            $info = $model->upImage();
    
    
            $info && is_array($info) ?
            exit(Json::htmlEncode($info)) :
            exit(Json::htmlEncode([
                'code' => 1, 
                'msg' => 'error'
            ]));
    
    
        } catch (\Exception $e) {
            exit(Json::htmlEncode([
                'code' => 1, 
                'msg' => $e->getMessage()
            ]));
        }
    }

    当然,你的common/components目录下还没有Upload.php,其代码参考如下

    <?php
    namespace common\components;
    use Yii;
    use yii\base\Model;
    use yii\web\UploadedFile;
    use yii\base\Exception;
    use yii\helpers\FileHelper;
    
    /**
     * 文件上传处理
     */
    class Upload extends Model
    {   
        public $file;
        private $_appendRules;
        public function init () 
        {
            parent::init();
            $extensions = Yii::$app->params['webuploader']['baseConfig']['accept']['extensions'];
            $this->_appendRules = [
                [['file'], 'file', 'extensions' => $extensions],
            ];
        }
    
        public function rules()
        {
            $baseRules = [];
            return array_merge($baseRules, $this->_appendRules);
        }
    
        /**
         * 
         */
        public function upImage ()
        {
            $model = new static;
            $model->file = UploadedFile::getInstanceByName('file');
            if (!$model->file) {
                return false;
            }
            $relativePath = $successPath = '';
            if ($model->validate()) {
                $relativePath = Yii::$app->params['imageUploadRelativePath'];
                $successPath = Yii::$app->params['imageUploadSuccessPath'];
                $fileName = $model->file->baseName . '.' . $model->file->extension;
                if (!is_dir($relativePath)) {
                    FileHelper::createDirectory($relativePath);    
                }
                $model->file->saveAs($relativePath . $fileName);
                return [
                    'code' => 0,
                    'url' => Yii::$app->params['domain'] . $successPath . $fileName,
                    'attachment' => $successPath . $fileName
                ];
            } else {
                $errors = $model->errors;
                return [
                    'code' => 1,
                    'msg' => current($errors)[0]
                ];
            }
        }
    }

    注意,你需要额外在params.php或者params-local.php文件内增加 imageUploadRelativePath 和 imageUploadSuccessPath配置项,前者指定相对的图片路径,后者用于保存的图片前缀,参考如下

    'imageUploadRelativePath' => './uploads/', // 图片默认上传的目录
    'imageUploadSuccessPath' => 'uploads/', // 图片上传成功后,路径前缀
    

    对于原form对应的AR模型来看,我们假设file和file2字段分别是单图和多图字段,那么在数据库保存的时候,$model->file="src"; $model->file2="src1,src2,src3,...";

    AR模型对应的rules我们可以这样写

    public function rules()
    {
        return [
            [['file', 'file2'], 'required'],
            [['file', 'file2'], 'safe'],
            [['file'], 'string', 'max' => 255],
        ];
    }

    即保证file和file2必填且file限制255个字符。

    此外,数据入库之前,你还需要对file2进行拆分处理

    is_array($this->file2) && $this->file2 && $this->file2 = implode(',', $this->file2);

    转载地址:http://www.manks.top/document/yii2-webuploader.html

    展开全文
  • 最近突然发现webuploader控件在微信端突然无法上传图片,其他浏览器都OK 后来用官方的demo试验可以,对比代码发现 修改这个配置就可以了 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', ...
  • 1.WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6...
  • webuploader 图片上传样式美化

    千次阅读 2019-01-08 16:16:00
    /* 图片上传 */ dd:after { content: '\A'; white-space: pre; } .upload-cover { float: left; background-color: rgba(250, 250, 250, 1); border: 1px solid rgba(230, 230, 230, 1); width: 180px; ...
  • ​官网http://fex.baidu.com/webuploader/getting-started.html ...使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。 <!--引入CSS--> <link rel="stylesheet" type="text/css" href="w...
  • 之前写过一篇文章 是通过form表单和ajax上传图片 虽然都是可以完成图片上传 但是体验效果惨目忍睹 这次查了一遍资料 发现百度有一款webUploader上传插件 真心好用和好看 功能强大 页面效果: 我设置的是 tomcat 的...
  • 由于使用display:none来设置的隐藏,每次刷新后对应的id为filePicker的div的宽高都默认为1px,按钮当然没有反应,网上找了很多具体都说不要使用display:none,使用css样式来设置。以下语句即解决了此问题。...
  • WebUploader 图片上传插件前后端代码

    千次阅读 2017-07-24 10:43:50
    上传成功之后,会返回已保存的图片连接,如果有多个,则用“," 逗号分割,大家也可以用json来代替。上传成功的回调方法为:fn_UploadCallBack(imgList)】 删除成功的效果图: 【删除图片为单个...
  • * 上传图片接口 * @param file * @return */ @PostMapping(value = "admin/upload/photo", consumes = MediaType.MULTIPART_FORM_DATA_VALUE) @ResponseBody public ApiResponse uploadPhoto(@RequestParam(...
  • 在项目中经常使用图片上传控件,以下是我项目中的一个做法,经验分享给大家!希望对各位有所帮助 前台jsp页面上引入iframe &lt;div class ="fl lph_w100 lph_h50 lph_lh34" style="width:588px...
  • 首先去官网下载 或者github上面下载 ...是把表单的数据 作为图片上传的参数 传进去的 在 examples/image-upload 里面的文件upload.js 添加ajax的 代码 ajax.php 是后台的文件 用于接收表单数据传给
  • // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file,response ) { path.push(response); console.log(path); $( '#'+file.id ).addClass('uplo...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 735
精华内容 294
关键字:

webuploader图片上传