H5 上传文件

jsp:代码

<input type="file" name="applyFile" id="applyFile" capture="camera" accept="application/pdf,image/*" multiple="multiple" >

  <img alt="" src="" id = "testImg" width="140" height="180">

var filedata = new Array();

    $("#applyFile").change(function(){

    debugger

      var file = document.getElementById("applyFile").files[0];              

       if(file) {

           var reader = new FileReader();

           reader.readAsDataURL(file);

           reader.onload = function(){

               var imgstr = this.result; //这就是base64字符串

                var image = document.getElementById("testImg");

               image.src = imgstr;

               filedata[0] = imgstr;

               alert(imgstr);

              var imageName = '111.pdf';

             //这里可换成ajax请求因为本框架不是springmvc没有使用ajax

               PlatformContext.getJSONBean('registerJsBean',appId).uploadImage(imageName,imgstr)

              .done(function(returnProduct){

                 alert("成功");

                  }).fail(function(err){

                    alert(err);

                  });

           };  

       }

    });

java代码:

public TransResult<Boolean> uploadImage(String imageName,String imageBase64){

    Map<String, String> imgMap = new HashMap<>();

     imageBase64=imageBase64.substring(imageBase64.indexOf(",")+1);

    imgMap.put(imageName, imageBase64);

    VisitService visitService = (VisitService) ApplicationContextUtil.getBean("visitServiceImpl");

    TransResult<String> resList = visitService.uploadFile(imgMap);

     return null;

}

@Override

   public TransResult<String> uploadFile(Map<String, String> imgMap) {

     // TODO Auto-generated method stub

     TransResult<String> result = new TransResult<>();

     OutputStream out = null;

     String imgTempPath = PropertiesUtil.getProperties("ftp.properties").getProperty(VisitConstant.VISIT_IMAGE_TEMP_PATH);

     try {

        for(String imgName : imgMap.keySet()){

          BASE64Decoder decoder = new BASE64Decoder();

          String imageBase64=imgMap.get(imgName);

          imageBase64=imageBase64.substring(imageBase64.indexOf(",")+1);

          byte[] bytes = decoder.decodeBuffer(imageBase64);

          for (int i = 0; i < bytes.length; ++i) {

             if (bytes[i] < 0) {// 调整异常数据

               bytes[i] += 256;

             }

          }

          String path = imgTempPath+ imgName;

          // 生成jpeg图片

          out = new FileOutputStream(path);

          out.write(bytes);

          out.flush();

        }

        result.success();

        result.setObject(imgTempPath);

     } catch (Exception e) {

        result.failure("保存图片过程中异常");

        Logger.info("[回访服务][保存图片][异常]");

        Logger.printStackTrace(e);

     }finally {

        try {

          out.close();

        } catch (IOException e) {

          // TODO Auto-generated catch block

          e.printStackTrace();

        }

     }

     return result;

   }

### HTML5 文件上传实现方法 HTML5 提供了多种方式来处理文件上传,这些新特性使得开发者能够更灵活地操作文件。通过`<input type="file">`标签可以创建一个基本的文件选择控件[^1]。 对于简单的单文件或多文件上传场景,在HTML页面中加入如下代码即可: ```html <input type="file" id="uploadFile" multiple> ``` 属性`multiple`允许一次选择多个文件。为了增强用户体验并满足复杂需求,如进度条显示、分片上传以及断点续传等功能,则需借助JavaScript进一步开发[^2]。 当涉及到大文件或者网络不稳定的情况时,采用分片上传策略是非常有效的解决方案之一。这种方式会将整个文件切割成若干个小片段依次发送给服务器端保存;如果传输过程中发生中断还可以继续未完成的部分而不需要重新开始整个过程[^3]。 另外一种常见的做法是利用一些成熟的框架或库来进行辅助编程工作,比如Vue.js配合特定组件(up6-vue-cli)[^4] 或者基于WebUploader这样的工具包[^5] 来简化编码难度的同时也提高了项目的稳定性和可维护性。 #### 关键技术要点 - **FormData对象**: 使用此API构建表单数据结构,并将其作为参数传递给XMLHttpRequest.send() 方法提交至后台接口。 - **Blob.slice()/ArrayBuffer**: 对于需要对文件进行预处理的应用程序来说非常重要,例如读取部分内容用于快速校验或是按照指定大小拆分成不同的块以便后续逐个上传。 - **事件监听器(Event Listener)**: 可以为HTTP请求设置各种状态改变后的回调函数,像loadstart,progress,abort,error 和 loadend 等,从而更好地控制交互逻辑并向用户提供反馈信息。 综上所述,HTML5文件 API 结合 JavaScript 编程提供了强大的能力去定制化文件上传体验,无论是简单的小型应用还是大型企业级平台都能找到合适的方案加以实施。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值