如何使用角度JS

如何使用角度JS

关注
发信
关注(28)粉丝(399)

如何使用角度JS Spring MVC的上传分段文件

本文介绍了如何使用角度JS Spring MVC的上传分段文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要上传使用angularjs和文件的Spring MVC

我在应用程序的context.xml一个multipartResolver豆。

 ＆LT; MVC：注解驱动/＆GT;    ＆LT;豆的id =multipartResolver
        类=org.springframework.web.multipart.commons.CommonsMultipartResolver＆GT;
        ＆LT;属性名=maxUploadSize值=2097152/＆GT;
    ＆LT; /豆＆GT;

我的形式是这样的：

 ＆LT;形式方法=邮报ID =fromFileUploadENCTYPE =的multipart / form-data的
                NG-提交=continueFileUpload（）＆GT;
        ＆LT; D​​IV CLASS =表单组＆GT;
            ＆LT;标签类=控制标签COL-SM-4 COL-XS-12为=quoteIdentifier＆GT;引用标识符：＆LT; /标签＆gt;
                ＆LT; D​​IV CLASS =COL-XS-4输入-MAX＆GT;
                    ＆LT;选择类型=文本级=表格控NAME =quoteIdentifierID =quoteIdentifierNG模型=quoteIdentifierNG选项=＆GT;
                    ＆LT;选项风格=显示：无VALUE =＆GT;选择与LT; /选项＆GT;
                    ＆LT; /选择＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =表单组＆GT;
            ＆LT;标签类=控制标签COL-SM-4 COL-XS-12为=文件＆gt;请上传的文件：其中，跨度类=必需＆GT; *＆LT; / SPAN＆GT; ＆LT; /标签＆gt;
            ＆LT; D​​IV CLASS =COL-XS-4输入-MAX控制＆GT;
                ＆LT;输入类=inline-block的TYPE =文件名称=文件NG-模式=文件数据规则要求的=真正的ID =文件接受=CSV，的.xsl，的.xml，.MPP，应用程序/ vnd.ms  -  Excel的＆GT;
            ＆LT; / DIV＆GT;
            ＆LT;跨度ID =vaildFile级=TEXT-成功图标确定隐藏＆GT;有效的文件＆LT; / SPAN＆GT; ＆LT;跨度ID =invaildFile级=TEXT-错误图标删除隐藏＆GT;无效的文件＆LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =盒子头＆GT;
            ＆LT; D​​IV CLASS =行动＆GT;
            ＆LT;按钮式=提交级=BTN BTN-小学＆GT;
                ＆LT; I类=图标右箭头＆GT;＆LT; / I＆GT;继续
            ＆LT; /按钮＆GT;
                ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
＆LT; /表及GT;$ scope.continueFileUpload =功能（）{
VAR的uploadURL = +的serverUrlcontinueFileUpload
VAR FORMDATA =新FORMDATA（）;
formData.append（文件，file.files [0]）;
 $ HTTP（{
        方法：POST，
        网址：的uploadURL，
        标题：{内容类型：虚假}，
        数据：FORMDATA，
        transformRequest：功能（数据，headersGetterFunction）{
                        返回的数据;
         }
     }）
    .success（功能（数据，状态）{
                    警报（成功）;
     }）};

春季控制器：

  @Controller
公共类FileUploadController {
@RequestMapping（值=/ continueFileUpload，方法= RequestMethod.POST）
    @ResponseBody
    公共字符串continueFileUpload（HttpServletRequest的请求，
            HttpServletResponse的响应）{
     MultipartHttpServletRequest mRequest;
        尝试{
            mRequest =（MultipartHttpServletRequest）请求;
            mRequest.getParameterMap（）;            迭代器＆LT;串GT; ITR = mRequest.getFileNames（）;
            而（itr.hasNext（））{
                MultipartFile MFILE = mRequest.getFile（itr.next（））;
                字符串文件名= mFile.getOriginalFilename（）;
                的System.out.println（文件名）;
            }
        }赶上（例外五）{
            e.printStackTrace（）;
        }
返回null;
    }

当我想补充的multipart / form-data的页眉我得到 **的请求被拒绝，因为没有多部分边界发现** 例外

如果我没有补充，我得到 org.apache.catalina.connector.RequestFacade不能转换为org.springframework.web.multipart.MultipartHttpServletRequest


解决方案

  $ scope.continueFileUpload =功能（）{
VAR的uploadURL = +的serverUrlcontinueFileUpload
VAR FORMDATA =新FORMDATA（）;
formData.append（文件，file.files [0]）;
 $ HTTP（{
        方法：POST，
        网址：的uploadURL，
        标题：{'内容类型'：未定义}，
        数据：FORMDATA，
        transformRequest：功能（数据，headersGetterFunction）{
                        返回的数据;
         }
     }）
    .success（功能（数据，状态）{
                    警报（成功）;
     }）};

I am trying to upload a file using angularjs and spring MVC

I have a multipartResolver bean in application-context.xml.

    <mvc:annotation-driven />

    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="2097152" />
    </bean>

my form look like this:

<form method="post" id="fromFileUpload" enctype="multipart/form-data"
                ng-submit="continueFileUpload()">
        <div class="form-group">
            <label class="control-label col-sm-4 col-xs-12" for="quoteIdentifier">Quote Identifier : </label>
                <div class="col-xs-4 input-max">
                    <select type="text" class="form-control " name="quoteIdentifier" id="quoteIdentifier" ng-model="quoteIdentifier" ng-options="">
                    <option style="display: none" value="">Choose</option>
                    </select>
                </div>
                </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-xs-12" for="file">Please upload the file : <span class="required">*</span> </label>
            <div class="col-xs-4 input-max controls ">
                <input class="inline-block" type="file" name="file" ng-model="file" data-rule-required="true" id="file"         accept=".csv,.xsl,.xml,.mpp,application/vnd.ms-excel">
            </div>
            <span id="vaildFile" class="text-success icon-ok hide">Valid File</span> <span id="invaildFile" class="text-error icon-remove hide"> Invalid File</span>
        </div>
        <div class="box-header">
            <div class="actions">
            <button type="submit" class="btn btn-primary">
                <i class="icon-arrow-right"></i> Continue
            </button>
                </div>
        </div>
</form>

$scope.continueFileUpload=function (){
var uploadUrl=serverUrl+"continueFileUpload";
var formData=new FormData();
formData.append("file",file.files[0]);
 $http({
        method: 'POST',
        url: uploadUrl,
        headers: {'Content-Type': false},
        data: formData,
        transformRequest: function(data, headersGetterFunction) {
                        return data;
         }
     })
    .success(function(data, status) {
                    alert("success");
     })

};

spring controller:

@Controller
public class FileUploadController {
@RequestMapping(value = "/continueFileUpload", method = RequestMethod.POST)
    @ResponseBody
    public String continueFileUpload(HttpServletRequest request,
            HttpServletResponse response){
     MultipartHttpServletRequest mRequest;
        try {
            mRequest = (MultipartHttpServletRequest) request;
            mRequest.getParameterMap();

            Iterator<String> itr = mRequest.getFileNames();
            while (itr.hasNext()) {
                MultipartFile mFile = mRequest.getFile(itr.next());
                String fileName = mFile.getOriginalFilename();
                System.out.println(fileName);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
return null;
    }

When I add multipart/form-data for the header I get **the request was rejected because no multipart boundary was found** exceptions

If I didnt add I get org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.MultipartHttpServletRequest

解决方案 
$scope.continueFileUpload=function (){
var uploadUrl=serverUrl+"continueFileUpload";
var formData=new FormData();
formData.append("file",file.files[0]);
 $http({
        method: 'POST',
        url: uploadUrl,
        headers: {'Content-Type': undefined},
        data: formData,
        transformRequest: function(data, headersGetterFunction) {
                        return data;
         }
     })
    .success(function(data, status) {
                    alert("success");
     })

};

这篇关于如何使用角度JS Spring MVC的上传分段文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-11 06:31
Powered by LMLPHP ©2024 如何使用角度JS 0.056252