html5上传

约定不等于承诺〃 2022-08-08 06:12 216阅读 0赞

<div id="drop_area">将图片拖拽到此区域</div>
    			<div id="preview"></div>

<script type="text/javascript">
    $(function(){     
    	//阻止浏览器默认行。     
    	$(document).on({        
    		dragleave:function(e){    
    			//拖离             
    			e.preventDefault();         
    		},         
    		drop:function(e){  
    			//拖后放            
    			e.preventDefault();         
    		},         
    		dragenter:function(e){    
    			//拖进             
    			e.preventDefault();         
    		},         
    		dragover:function(e){    
    			//拖来拖去             
    			e.preventDefault();         
    		}     
    	});
    
    	var box = document.getElementById('drop_area'); 
    	//拖拽区域    
    	box.addEventListener("drop",function(e){         
    		e.preventDefault(); //取消默认浏览器拖拽效果         
    		var fileList = e.dataTransfer.files; //获取文件对象         
    		//检测是否是拖拽文件到页面的操作         
    		if(fileList.length == 0){             
    			return false;         
    		}         
    		//检测文件是不是图片         
    		if(fileList[0].type.indexOf('image') === -1){            
    			alert("您拖的不是图片！");             return false;         
    		}                  
    		//拖拉图片到浏览器，可以实现预览功能         
    		var img = window.URL.createObjectURL(fileList[0]);         
    		var filename = fileList[0].name; //图片名称         
    		var filesize = Math.floor((fileList[0].size)/1024);          
    		if(filesize>5000){             
    			alert("上传大小不能超过5000K.");             
    			return false;         
    		}
    		var str = "<img src='"+img+"'><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p>";         
    		$("#preview").html(str);                  
          	
    		var fd = new FormData();
            //关联表单数据,可以是自定义参数
    		fd.append('mypic', fileList[0]); 
    		//xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    		//监听事件
    		xhr.upload.addEventListener("progress", uploadProgress, false);
    		xhr.addEventListener("load", uploadComplete, false);
    		xhr.addEventListener("error", uploadFailed, false);
    		xhr.addEventListener("abort", uploadCanceled, false);
    		//发送文件和表单自定义参数
    		xhr.open("POST", ROOT_PATH+"builder/image/upload");
    		xhr.send(fd);
    		
    	},false); 
    	
    }); 
    </script>
    
    <script type="text/javascript">
        var xhr = new XMLHttpRequest();
         
        //监听选择文件信息
        function fileSelected() {
            //HTML5文件API操作
              var file = document.getElementById('fileName').files[0];
              if (file) {
                var fileSize = 0;
                if (file.size > 1024 * 1024)
                  fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else
                  fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
     
                document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
                document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
                document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
              }
            }
         
        //上传文件
    	function uploadFile() {
    		var fd = new FormData();
              //关联表单数据,可以是自定义参数
    		fd.append('mypic', fileList[0]); 
    		xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    		//监听事件
    		xhr.upload.addEventListener("progress", uploadProgress, false);
    		xhr.addEventListener("load", uploadComplete, false);
    		xhr.addEventListener("error", uploadFailed, false);
    		xhr.addEventListener("abort", uploadCanceled, false);
    		//发送文件和表单自定义参数
    		xhr.open("POST", ROOT_PATH+"builder/image/upload");
    		xhr.send(fd);
    	}
        //取消上传
        function cancleUploadFile(){
            xhr.abort();
        }
         
        //上传进度
    	function uploadProgress(evt) {
       	if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
          }
          else {
            document.getElementById('progressNumber').innerHTML = 'unable to compute';
          }
    	}
     
        //上传成功响应
        function uploadComplete(evt) {
            //服务断接收完文件返回的结果
            alert(evt.target.responseText);
        }
             
        //上传失败
        function uploadFailed(evt) {
             alert("上传失败");
        }
        //取消上传
        function uploadCanceled(evt) {
            alert("您取消了本次上传.");
        }
        </script>

@RequestMapping(value = "/upload", method = RequestMethod.POST)
    	@ResponseBody
    	public String upload(DefaultMultipartHttpServletRequest request) throws IOException {
    		MultiValueMap<String, MultipartFile> map = request.getMultiFileMap();
    		List<MultipartFile> multipartFiles = (List<MultipartFile>) map
    				.get("mypic");
    		String path = getFileUploadPath();
            String absolutePath = getAbsolutePath(path, request);
            File folder = new File(absolutePath);
            if (!folder.exists()) {
                folder.mkdirs();
            }
    		for (MultipartFile multipartFile : multipartFiles) {
    			String rawName = multipartFile.getOriginalFilename();
    	        String fileExt = rawName.substring(rawName.lastIndexOf("."));
    	        String newName = System.currentTimeMillis() + UUID.randomUUID().toString() + fileExt;
    	        File saveFile = new File(absolutePath + File.separator + newName);
    	        FileOutputStream fs = new FileOutputStream(saveFile);
    			SaveFileFromInputStream(multipartFile.getInputStream(), fs);
    			
    			Resource image = new Resource();
    			image.setName(rawName);
    			image.setType(resourceTypeService.findByCode(TypeCode.IMAGE));
    			String attachment = getFileUploadPath()+"/"+newName;
    			image.setAttachment(attachment);
    			String filePath = Strings.isNullOrEmpty(attachment) ? null : getAbsolutePath(attachment, request);
    			resourceService.save(image);
    			filePath = Strings.isNullOrEmpty(attachment) ? null : getAbsolutePath(attachment, request);
    	        resourceService.saveFile(image, filePath);
    			setImageProperty(image);
    			resourceService.update(image);
    		}
    		
    		return "redirect:/builder/image";
    	}
    
    	public void SaveFileFromInputStream(InputStream stream, FileOutputStream fs) throws IOException {
    		byte[] buffer = new byte[1024 * 1024];
    		@SuppressWarnings("unused")
    		int bytesum = 0;
    		int byteread = 0;
    		while ((byteread = stream.read(buffer)) != -1) {
    			bytesum += byteread;
    			fs.write(buffer, 0, byteread);
    			fs.flush();
    		}
    		fs.close();
    		stream.close();
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 文件上传

HTML5 文件上传另参考 http://www.jianshu.com/p/46e6e03a0d53 1 filelist对象与file对象： 1 <inpu

怼烎@/ 2023年08月17日 16:20/ 0 赞/ 153 阅读

相关 HTML5 读取上传文件

1 filelist对象与file对象： <input type="file" id="file" multiple> //multiple可上传多个文件

亦凉/ 2023年02月22日 15:53/ 0 赞/ 35 阅读

相关 HTML5拖拽文件上传

上传文件 HTML5新增了文件API,提供客户端本地操作文件的可能. 我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类

淩亂°似流年/ 2023年01月01日 06:56/ 0 赞/ 173 阅读

相关 html上传文件以及验证_验证HTML5文档

html上传文件以及验证 ![htmlcss2thumb][] The following is an extract from our book, [HTML5 & CS

逃离我推掉我的手/ 2022年12月03日 09:57/ 0 赞/ 186 阅读

相关 html5上传

<div id="drop_area">将图片拖拽到此区域</div> <div id="preview"></div> <scrip

约定不等于承诺〃/ 2022年08月08日 06:12/ 0 赞/ 217 阅读

相关 html5压缩图片并上传

手机端图片有很大的，上传的时候很慢，这时候就要压缩一下了，有一个开源的js可以压缩图片的大小，开源地址如下：[https://github.com/think2011/loca

阳光穿透心脏的1/2处/ 2022年08月04日 12:59/ 0 赞/ 274 阅读

相关利用HTML5分片上传超大文件

在网页中直接上传大文件一直是个比较头疼的问题，主要面临的问题一般包括两类：一是上传时间长中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管

た入场券/ 2022年07月11日 16:00/ 0 赞/ 222 阅读

相关 [HTML5] FileReader 上传文件读取

new FileReader(); function upLoadImg(){ var file = document.getElementById('u

傷城~/ 2022年05月08日 07:46/ 0 赞/ 253 阅读

相关使用HTML5实现多文件上传

在Dojo1.6中有一个崭新的Multi-File Uploader (dojox.form.Uploader)，它具有一个可定制样式的file input按钮，可使用多文件选

我就是我/ 2022年04月16日 20:44/ 0 赞/ 903 阅读

相关 html5+servlet文件上传

1、index.jsp <html> <body> <script src="http://ajax.googleapis.com/ajax/libs

墨蓝/ 2021年06月24日 14:37/ 0 赞/ 472 阅读