html的ajax上传文件

html的ajax上传文件

      html中经常会有上传文件的功能。

      常见的实现方法有，form标题提交上传。 

       ajax上传。

    ajxa上传比form上传体验效果更好，扩展性更改，界面与逻辑耦合度低。

    实现思路：

    1、本地选择文件进

    2、本地文件选择成功后显示本地文件路径，

    3、获取本地文件的流，放入到formData中

    4、通过ajax将本地文件上传到服务器，服务器接收文件流，保存到本地，

    5、服务器保存成功则服务器将保存到本地的位置返回给前端，否则返回上传文件失败

  实现代码：

  upload.html：

  <div class="treamitem">                        <label class="label" >战队图标:</label>                        <input class="treamiteminput browsetreaminput" type="text" id="browsetreaminput"  readonly="readonly" />                        <input class="hide" id="treamitemFile" type="file"  />                        <div class="browsetreamwrap" id="selectHeadimg">                            <div class="browsetreambtn">浏览</div>                        </div>                    </div>

  upload.js：

//战队头像上传    $('#selectHeadimg').click(function() {        $('#treamitemFile').click(); // 模拟文件上传按钮点击操作    });    //选择文件后将文件名显示    $('#treamitemFile').change(function () {        $('#browsetreaminput').val($(this).val());        //执行ajax上传            var fd = new FormData();            fd.append("upload", 100);            fd.append("Filedata", $("#treamitemFile").get(0).files[0]);            $.ajax({                url: "/ccnb/base/picture/upload?name=test",                type: "POST",                processData: false,                contentType: false,                data: fd,                success: function(d) {                    console.log(d);                }            });    });

 后端获取文件io流的代码：

     upload.java：

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;Map fileMap = multipartRequest.getFileMap();MultipartFile multipartFile = (MultipartFile) fileMap.get("Filedata");byte[] buff = multipartFile.getBytes();