浅谈 Html5 带进度条的的文件图片(带本地回显)上传(后台代码)

@RequestMapping(“/upload2.do”)
//@ResponseBody
public String uploadFile2(@RequestParam(“file”) CommonsMultipartFile file,int flag,
HttpServletRequest request,HttpSession session,String pluginUrl,Integer pluginid) throws IOException {
//文件夹路径
String packPath = “”;
//文件路径
String path =”“;
// 定义解析器去解析request
CommonsMultipartResolver mutilpartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//request如果是Multipart类型、
if (mutilpartResolver.isMultipart(request)) {
//强转成 MultipartHttpServletRequest
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
//获取文件名
Iterator it = multiRequest.getFileNames();
while (it.hasNext()) {
//获取MultipartFile类型文件
MultipartFile fileDetail = multiRequest.getFile(it.next());
if (fileDetail != null) {
String fileName = fileDetail.getOriginalFilename();
String currentDate = DateFormatUtils.getCurrentDate();
String accountName = session.getAttribute(“accountName”).toString();
PlatformDevEnApply apply = this.pluginService.getPlatformDevEnApplyByAccountName(accountName);
String orgId = apply.getOrganizationuid();//应用商编码
//pluginUrl 为审核不通过的插件包所在地址,如果pluginUrl存在且不为空,那么将该插件删除,且将插件状态置为已删除
System.out.println(“pluginUrl ==” + pluginUrl);
if(pluginUrl != null && !”“.equals(pluginUrl) ){
String delFile = new StringBuffer(pluginUrl).append(File.separator).append(fileName).toString();
/* String delFile = pluginUrl + fileName;
*/ System.out.println(“delFile = ” + delFile);

                        //String del = "rm -rf "+delFile;
                        System.out.println("===========before RunTimeExec.runTimeExec=====");
                        /*RunTimeExec.runTimeExec(del);*/
                         DeleteFile.deleteFile(delFile);
                        System.out.println("===========before RunTimeExec.runTimeExec=====");
                        pluginService.delPluginMessageById(pluginid);
                    }

                    // path = "/usr/upload" + fileName;
                    /*packPath = new StringBuffer().append(File.separator).append("usr")
                             .append(File.separator).append("upload")
                             .append(File.separator).append(currentDate)
                             .append(File.separator).append(orgId).toString();*/
                    /* String fileName = "Upload" + fileDetail.getOriginalFilename();
                     path = "D:/" + fileName;*/
                    String type="";
                    if(flag==1){//插件
                        type="1111";
                    }else if(flag==2){//文件
                        type="1";
                    }else if(flag==3){//图片
                        type="111";
                    }else if(flag==4){//图标
                        type="11";
                    }
                    ConfigInfo configInfo = configInfoService.getConfigInfoByFunctionType(type);
                    path=configInfo.getPath();
                     path=new StringBuffer(path).append(File.separator).append(fileName).toString();
                    //path = new StringBuffer(packPath).append(File.separator).append(fileName).toString();
                     System.out.println("path : " + path);
                    /* File pack = new File(packPath);
                     if(!pack.exists() && !pack.isDirectory()){
                         System.out.println("package not exists");  
                         pack.mkdirs();
                         System.out.println("package create true");
                     }
                    System.out.println("=====package exists====");*/

                    File localFile = new File(path);
                    //将上传文件写入到指定文件出、核心!
                    fileDetail.transferTo(localFile);
                    //非常重要、有了这个想做什么处理都可以
                    //fileDetail.getInputStream();
                }
            }
        }
        request.setAttribute("path", path);  

        return "/admin/plugManage/pluginUpLoad.html";
    }
HTML上传图片回显通常涉及到前端HTML表单配合JavaScript和后端处理技术。以下是基本步骤: 1. **创建HTML输入元素**: 使用`<input type="file">`标签让用户选择图片文件,用户点击后会弹出文件选择器。 ```html <input type="file" id="imageFile" accept=".jpg, .jpeg, .png"> ``` 2. **添加事件监听**: JavaScript通过`addEventListener`监听文件选择后发生的变化,例如onChange事件。 ```javascript document.getElementById('imageFile').addEventListener('change', handleImageSelect); ``` 3. **处理文件上传**: 定义`handleImageSelect`函数,读取选中的文件作为FormData对象的一部分,并发送到服务器。 ```javascript function handleImageSelect(e) { const file = e.target.files[0]; const formData = new FormData(); formData.append('image', file); // 发送POST请求到服务器 fetch('/upload', { method: 'POST', body: formData, }) .then(response => response.blob()) .then(blob => { // 在这里处理服务器返回的blob,可以显示在页面上 displayImage(blob); }); } ``` 4. **服务器处理及回显图片**: 后端语言如PHP、Node.js等接收上传图片,保存到数据库或服务器存储路径,然后返回图片URL。前端接收到URL后,可以设置`<img>`标签src属性显示图片。 5. **显示回显图片**: ```javascript function displayImage(imageBlob) { const imgElement = document.createElement('img'); imgElement.src = URL.createObjectURL(imageBlob); document.body.appendChild(imgElement); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值