ajaxfileupload控件用户上传文件的坑

ajaxfileupload.js是一个很方便的上传文件的控件,使用也简单,结合jquery使用

                $.ajaxFileUpload({
                    "url": "${context}/manage/doctor/addDoctor.htm?doctorName=" + doctorName
                            + "&doctorTitle=" + doctorTitle + "&doctorId=" + doctorId,
                    "secureuri": false,
                    "fileElementId": "fileToUpload",
                    "dataType": "json",
                    "success": function (data, status) {
                        if (data.errorCode == 0) {
                            alert("保存成功");
                        } else {

                        }
                    },
                    "error": function (data, status, e) {
                        alert(data.message + " error:  " + e);
                    }
                });

fileElementId 就是你html代码中 <input type="file" id="***">中的ID

需要注意的是,如果你需要的返回数据格式是json,那么后台配置的接口返回的contentType 必须是 text/html ,我用的是spring mvc, 所以加了一个bean 

    <bean id="handlerAdapter"
              class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
        <property name="messageConverters">
            <list>
                <bean
                    class="org.springframework.http.converter.StringHttpMessageConverter">
                    <property name="supportedMediaTypes">
                        <list>
                            <bean class="org.springframework.http.MediaType">
                                <constructor-arg index="0" value="text" />
                                <constructor-arg index="1" value="html" />
                                <constructor-arg index="2" value="UTF-8" />
                            </bean>
                        </list>
                    </property>
                </bean>
            </list>
        </property>
    </bean>

再有就是在使用中发现<input type="file">控件,只能使用一次,第二次使用的时候,死活不触发选择按钮会执行的函数,必须刷新页面之后,才能继续使用,后来的解决方案是:

        $(document).on('change', '#fileToUpload', function () {
            var objUrl = getObjectURL(this.files[0]);
            alert(objUrl);
            if (objUrl) {
                $("#headPic").attr("src", objUrl);
            }
        });


这样就能重复使用该控件进行文件的选择了。这种写法是jquery 1.9之后的写法,jquery旧的版本中使用的是live函数,这个函数后面被舍弃了,用on函数替代。

另外,

        $("#fileToUpload").on('change', funtion() {

........

});

以及   

       $("#fileToUpload").change(funtion() {

........

});

这两种写法,经过测试,也无效。

猜你喜欢

转载自blog.csdn.net/zxcvqwer19900720/article/details/40149011
今日推荐