• 话题:jQuery 关于文件上传表单处理的一个非常怪异的问题


    jQuery 有个插件 jQuery.Form ,这个插件功能很强大,可以用来处理文件上传的表单。

    下面是这个问题的描述:

    假设有这么一个表单

    <form id="form_img" action="/action/upload" method="POST" enctype="multiple/form-data">
    <input type="file" name="img"/><input type="submit" value="上传"/>
    </form>

    我们可以用下面的脚本来提交

    $('#form_img').ajaxForm({
        success: function(html) {
            alert(html);
        }
    });

    假设上传页面的地址是 http://www.oschina.net/upload.html

    那么处理文件上传请求的地址就是 http://www.oschina.net/action/upload

    我们引入jquery的js文件的代码如下(为了将所有静态文件独立存放,我们使用了一个 http://static.oschina.net 的域名):

    <script type="text/javascript" src="http://static.oschina.net/js/jquery.js?ver=1.3.2"></script>
    <script type="text/javascript" src="http://static.oschina.net/js/jquery.form.js?ver=2.21"></script>

    接下来选择要上传的文件并点击上传按钮时,后台程序显示文件上传成功,但是页面上有一个 alert(html) 却不执行。

    而我们只需要把引入js的代码改为:

    <script type="text/javascript" src="/js/jquery.js?ver=1.3.2"></script>
    <script type="text/javascript" src="/js/jquery.form.js?ver=2.21"></script>

    去掉js文件的主机头后,页面就可以正常显示提示信息。


    到此问题描述结束,这个问题花了三个小时才解决,但还是不知道是什么原因导致,我知道这个插件为了处理文件上传做了很多复杂的处理,也没去细看它的源码。

    另外我发现这个问题的现象跟Ajax在进行跨域名调用时的现象是一致的,在浏览器端表现为没有任何的提示信息、没有任何反应,但也没报脚本错误之类的信息。

    很是困惑,有空要好好看看 jquery.form 这个插件的代码。

  • 相关阅读:
    React: React的组件状态机制
    React: React的复合组件
    JavaScript:ES6的新特性
    React: 研究React的组件化
    React: 认识React
    CSS:CSS弹性盒子布局 Flexible Box
    iOS:应用程序扩展开发之Today扩展(Today Extesnsion)
    《逆向工程核心原理》
    《左手数据,右手图表》
    《设计模式之禅(第2版)》
  • 原文地址:https://www.cnblogs.com/luluping/p/1690106.html
Copyright © 2020-2023  润新知