Ext5实现html5的拖拽上传功能 博客分类： ext5 hmtl5 html5extuploadFile

这方面网络上的资源有很多，所以直接上代码了。
ext使用SenchaArchitect开发
后台用的jersey

@POST
	@Path("/upload")
	@Consumes(MediaType.MULTIPART_FORM_DATA)
	public Response upload(@NotBlank @FormDataParam("SID") String sid, @NotNull @FormDataParam("size") Long size,
			@NotNull @FormDataParam("dmsFileId") Long dmsFileId, @FormDataParam("file") InputStream fileInputStream,
			@FormDataParam("file") FormDataContentDisposition contentDispositionHeader) {

		try {
			Boolean valid = sessionsService.checkSessionsValid(sid);
			if (valid == null) {
				throw new Exception("session not exist !");
			}
			if (!valid) {
				throw new Exception("session is invalid !");
			}

			// Get Configuration
			String names[] = { "system.dms.upload.destFolder", "system.dms.upload.maxFilesizeInBytes",
					"system.dms.upload.tempFolder", "system.dms.upload.allowed", };
			Map configurations = configurationsService.getSystemConfigurationsByName(names);

			String destFolder = ((Configurations) configurations.get("system.dms.upload.destFolder")).getDefaultvalue();
			Integer tempMaxFilesizeInBytes = Utils.getInteger(
					((Configurations) configurations.get("system.dms.upload.maxFilesizeInBytes")).getDefaultvalue());
			int maxFilesizeInBytes = -1;
			if (tempMaxFilesizeInBytes != null) {
				maxFilesizeInBytes = tempMaxFilesizeInBytes.intValue();
			}
			String tempDir = ((Configurations) configurations.get("system.dms.upload.tempFolder")).getDefaultvalue();
			boolean allowed = "1"
					.equals(((Configurations) configurations.get("system.dms.upload.allowed")).getDefaultvalue());

			// Create Directorys
			File destDirFile = new File(destFolder);
			if (!destDirFile.exists()) {
				destDirFile.mkdirs();
			}

			File tempDirFile = new File(tempDir);
			if (!tempDirFile.exists()) {
				tempDirFile.mkdirs();
			}

			Sessions session = sessionsService.getSessions(sid);
			Long usersId = session.getUserid();

			int maxSize = 1073741824;
			String fileName = contentDispositionHeader.getFileName();

			// Check dmsFileId if exist
			DmsFiles file = dmsFilesService.findById(DmsFiles.class, dmsFileId);
			if (file == null) {
				throw new Exception("DmsFileId is not exist :" + dmsFileId);
			}

			// Check if file size is too big
			if (!((maxFilesizeInBytes == -1 || maxFilesizeInBytes >= size) && size <= maxSize)) {
				throw new Exception("File Upload FAILED. File is too Big : " + size);
			}

			// Check if dest Folder exist and create it if necessary
			destDirFile = new File(destFolder + dmsFilesService.getRelativIdFolderPath(dmsFileId));
			if (!destDirFile.exists()) {
				destDirFile.mkdirs();
			}

			String datapath = destFolder + dmsFilesService.getRelativIdFilePath(dmsFileId);

			if (!destFolder.endsWith("/") && !destFolder.endsWith("\\")) {
				destFolder += "/";
			}

			// save the file to the server
			saveFile(fileInputStream, datapath);

			// Write DmsFile Info TXT for disaster recovery
			RandomAccessFile recorvery_infoFile = new RandomAccessFile(datapath + ".txt", "rw");
			recorvery_infoFile.writeBytes("Org. Filename: " + fileName + "\r\n");
			recorvery_infoFile.writeBytes("Filesize: " + size + "\r\n");
			recorvery_infoFile.writeBytes("Upload Date: " + new Date() + "\r\n");
			recorvery_infoFile.writeBytes("Upload User ID:" + usersId + "\r\n");
			recorvery_infoFile.writeBytes("DMSFile ID : " + dmsFileId + "\r\n");
			recorvery_infoFile.close();

			dmsFilesService.updateFileDataPath(dmsFileId, datapath);
			//update fileSize
			dmsFilesService.mergeFileSize(dmsFileId, size);

			log.info("File Uploaded succesfully with ID " + dmsFileId);
			log.info("File saved to server location : " + datapath);

			return Response.ok("ok").build();

		} catch (Exception e) {
			log.error(ExceptionUtils.getFullStackTrace(e));
			return Response.serverError().entity(e.getMessage()).build();
		}

	}

在最外层的window上添加代码

   onMainViewportAfterRender: function(component, eOpts) {
        //drage and drop file to upload in explorer file win
        window.ondragenter = function(e)
        {
            e.preventDefault();
        };

        window.ondragover = function(e)
        {
            e.preventDefault();
        };

        window.ondrop = function(e)
        {
            e.preventDefault();
        };

        window.ondragleave = function(e)
        {
            e.preventDefault();
        };


         //xxxxxx  

    }

在文件导航window上添加dropFileToUpload方法

{  localStorage.setItem('dmsId',result);
                                var fd = new FormData();
                                fd.append("file", tempfile);
                                fd.append("SID", localStorage.getItem('sid'));
                                fd.append("size", file.size);
                                fd.append("dmsFileId",result);
                                var xhr = new XMLHttpRequest();
                                xhr.upload.addEventListener("progress", function(){
                                    dropUploadProgress.call(controller,arguments);
                                }, false);
                                xhr.addEventListener("load",function(){
                                    var successFileSize = Number(localStorage.getItem("successFileSize"));
                                    var filesSize = Number(localStorage.getItem("filesSize"));
                                    var failedFileSize = Number(localStorage.getItem("failedFileSize"));
                                    successFileSize++;
                                    localStorage.setItem("successFileSize",successFileSize);

                                    if((successFileSize+failedFileSize)==filesSize){
                                        refreshFileList.call(controller,parentnode.data.folderId,arguments);
                                    }else{
                                       dropFileToUpload(file, controller, tree);
                                    }

                                } , false);
                                xhr.upload.addEventListener("error", function(){
                                    var successFileSize = Number(localStorage.getItem("successFileSize"));
                                    var filesSize = Number(localStorage.getItem("filesSize"));
                                    var failedFileSize = Number(localStorage.getItem("failedFileSize"));
                                    failedFileSize++;
                                    localStorage.setItem("failedFileSize",failedFileSize);

                                    dropUploadFailed.call(controller,arguments);

                                    if((successFileSize+failedFileSize)==filesSize){
                                        refreshFileList.call(controller,parentnode.data.folderId,arguments);
                                    }else{
                                       dropFileToUpload(file, controller, tree);
                                    }

                                }, false);
                                xhr.open("POST", "../../../rest/FileExplorerPortal/upload");
                                xhr.send(fd);
}

  refreshFileList: function(folderID, evt) {
        var progressBar = this.getView().lookupReference('dropFileToUploadProgressBar');
        if(progressBar.isVisible()){
               progressBar.hide();
        }
        progressBar.setValue(0);
        progressBar.updateText('0%');

        var successFileSize = Number(localStorage.getItem("successFileSize"));
        var filesSize = Number(localStorage.getItem("filesSize"));
        var failedFileSize = Number(localStorage.getItem("failedFileSize"));
        if(filesSize>1){
            Ext.Msg.show({
               title:'Result',
               message: 'Upload successful:'+successFileSize+" , Upload failed:"+failedFileSize,
               buttons: Ext.Msg.OK
            });
        }else if(failedFileSize==1){
             Ext.Msg.show({
               title:'Error',
               message: 'The file upload failed, please try again...',
               buttons: Ext.Msg.OK
            });
        }

        if(folderID){
            this.getView().lookupReference('FilesList').store.load({params:{folderId:folderID}});
        }

    },

    dropUploadProgress: function(evt) {
        var successFileSize = localStorage.getItem("successFileSize");
        var filesSize = localStorage.getItem("filesSize");


        var progressBar = this.getView().lookupReference('dropFileToUploadProgressBar');
        if (evt[0].lengthComputable) {
            if(!progressBar.isVisible()){
                progressBar.show();
            }
            var percentComplete = Math.round(evt[0].loaded*100 / evt[0].total);
            var filesInfo = "   ("+successFileSize+"/"+filesSize+")";
            progressBar.setValue(percentComplete/100);
            progressBar.updateText(percentComplete+'%'+filesInfo);
        }else {
            progressBar.updateText('Uploding....');
        }
    },

    dropUploadFailed: function(evt) {
        var progressBar = this.getView().lookupReference('dropFileToUploadProgressBar');
        progressBar.setValue(0);
        progressBar.updateText('0%');
        progressBar.hide();
    },