如何使用 jquery 或 JavaScript 在一次浏览中上传多个文件

2023-11-27

我正在开发一个网络应用程序,其中我为多个文件创建了一个页面 一次上传一个浏览文件,而不是一次上传一个文件。

用户将能够通过单击浏览来选择多个文件。

如果有人对此有解决方案,欢迎

Thanks!


对于替代解决方案,您可以使用 HTML5 多重上传,

HTML

设置属性multiple对于您的输入文件,请检查此链接https://developer.mozilla.org/en-US/docs/Web/API/Input.multiple

<form id="form-upload">
    <input type="file" name="upload" id="upload" multiple>
</form>

JS

要使用 juery 上传文件,您可以使用 form-data :https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

 $('#upload').bind("change", function(){
    var formData = new FormData($("#form-upload")[0]);
    //loop for add $_FILES["upload"+i] to formData
    for (var i = 0, len = document.getElementById('upload').files.length; i < len; i++) {
        formData.append("upload"+(i+1), document.getElementById('upload').files[i]);
    }

    //send formData to server-side
    $.ajax({
        url : "process_upload.php",
        type : 'post',
        data : formData,
        dataType : 'json',
        async : true,
        processData: false,  // tell jQuery not to process the data
        contentType: false,   // tell jQuery not to set contentType
        error : function(request){
            console.log(request.responseText);
        },
        success : function(json){
            //place your code here
        }
    }); 
});  

服务器端(例如:PHP)

//just print $_FILES
print_r($_FILES);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 jquery 或 JavaScript 在一次浏览中上传多个文件 的相关文章

  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • JavaScript RegEx:不同的结果:使用字符串和使用正则表达式“文字”构建模式?

    使用 RegExp 文字与字符串之间有什么区别吗 http jsfiddle net yMMrk http jsfiddle net yMMrk String prototype lastIndexOf function pattern p
  • 覆盖 jQuery 验证 MVC4 中的默认设置

    要覆盖查询验证插件 请在文件 http docs jquery com Plugins Validation validate toptions 推荐的方式是 selector validate invalidHandler functio
  • 用于选择特定 div 中具有特定类的锚元素的 jQuery 选择器是什么

    我有一些这样的代码 我想选择每个 a 带有类的标签status在 div 中foo div a class status a div 你可以这样做 foo find status a
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 什么是 WKWebView 中的 WKErrorDomain 错误 4

    fatal error LPWebView encounters an error Error Domain WKErrorDomain Code 4 A JavaScript exception occurred UserInfo 0x7
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐