【前端】文件上传框架plupload使用(前后端交互)

这个框架是用来给前端设置文件上传的按钮的。
首先要明白,前端向后端发送请求的方式有get和post,两者的区别在于,前者只能在网址中携带参数,后者是在请求体body中携带参数。
Plupload向后端发送请求是post请求方式,发送文件的方式是一个一个文件发送,或者是将文件分为多chunk,以chunk为单位发送。
代码示例如下。

function InitUpload() {filters={};uploader = new plupload.Uploader({runtimes: 'html5,flash,silverlight,html4',browse_button: 'SelectFile',url:'请求url网址',chunk_size: "4mb",flash_swf_url: '../Content/plupload/js/Moxie.swf',silverlight_xap_url: '../Content/plupload/js/Moxie.xap',filters: filters,init: {PostInit: function () { $("#filelist").html(""); },BeforeUpload:function(up,file){itemCode = file.name.split(".")[0].split("_")[0];custoName = document.getElementById('custoMer').value;uploader.setOption("multipart_params", {"user":Cur_User,"text" : custoName,"Item_Code":itemCode,"UploadState":"添加成功"})$('#dlg').dialog('close');},FilesAdded: function (up, files) {GenFileTable(up.files);},UploadProgress: function (up, file) {$("#filelist").find("#Span_" + file.id).text(file.percent + "%");},FileUploaded: function (up, file, ret) {dodel("#"+file.id);//$("#"+file.id).remove();$('#dg').datagrid('reload');console.log(ret);},UploadComplete: function (up, file) {$("#fileListItem").remove();resetUploader();$('#dg').datagrid('reload');alert("上传完成");},Error: function (up, err) {$("#filelist").html('<font style="color:red;">文件上传错误!' + err.code + ',' + err.message + '</font>');$.messager.show({ title: '错误提示', msg: err.message });}}});

各种属性值所代表的意思:

在这里插入图片描述
plupload示例所拥有的方法
在这里插入图片描述
事件说明:
在这里插入图片描述
这个组件使用也很简单,就是设置表单之后,html中设置相应按钮,(选择文件按钮,以及开始上传按钮)。然后分别绑定上相应的事件就可以了。
html 代码:其中SelectFile的按钮就是选择文件按钮,将其id设置给browse_button属性值,就能选择文件。

  <div id="dlg" class="easyui-dialog" title="wor" style="width: 600px; height: 400px; padding: 10px 20px;" closed="true" buttons="#dg-buttons"><form id="uploadForm"><label for='custoMer'>客户名称:</label><input type="text" name="custoMer" id="custoMer"><button id="SelectFile" href="javascript:void(0);"    iconcls="&#xe602;">选择文件</button></form><div id="filelist"></div> </div>        <div id="dg-buttons" style="display:block"><a id="start_upload" href="javascript:void(0)"  class="easyui-linkbutton"  plain="true">确认并添加水印</a><a href="javascript:void(0)" class="easyui-linkbutton"  plain="true"  onclick="javascript:$('#dlg').dialog('close')" >取消</a></div>

想要设置确认按钮就开始上传。js设置监听事件。

    document.getElementById('start_upload').onclick = function(event){//阻止默认事件event.preventDefault();custoName = document.getElementById('custoMer').value;if(custoName=="" || custoName==null) {$.messager.show({ title: '错误提示', msg: "请输入客户名!" });}else{uploader.start(); //调用实例对象的start()方法开始上传文件,当然你也可以在其他地方调用该方法}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/409001.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python】从基础到进阶(六):深入理解Python中的面向对象编程(OOP)

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、引言二、面向对象编程概述1. 什么是面向对象编程&#xff1f;面向对象的三大基本特性 2. 类和对象3. 类的属性与方法 三、继承与多态1. 继承2. 多态 四、封装与数据隐藏1. 封装2. 数据隐藏 五、案例&#xff1a;员工管理…

华为自研仓颉编程语言测试版上线,计划持续到10月21号

现如今&#xff0c;编程语言作为构建软件世界的基石&#xff0c;其重要性不言而喻。 而华为&#xff0c;作为全球领先的信息与通信技术&#xff08;ICT&#xff09;解决方案提供商&#xff0c;其在技术创新上的每一步都备受瞩目。最近&#xff0c;华为再次成为焦点&#xff0c…

USB3.0硬件简单概述

关于USB2.0&#xff0c;小白在之前的文章简单的描述过。关于USB3.0&#xff0c;今天小白也简单的介绍下。 相比较于USB2.0&#xff0c;USB3.0有了很大的变化。信号端USB3.0除了包含USB2.0的四根信号&#xff0c;还新增了2对差分信号SSRXN SSRXP SSTXN SSTXP以及GND_DRAIN(信号…

Flask返回Json格式字符,中文导致unicode乱码问题

一.问题描述 或者直接返回json格式的字符串 从上图可以看出&#xff0c;当flask实现的接口响应中存在中文时&#xff0c;接口返回json字串的中文为unicode乱码。 二.问题解决 百度搜索了很多&#xff0c;原来在创建flask app时使用json格式的字符串&#xff0c;默认是ascii编…

金融科技 API 接口:提升金融服务效率的关键

金融科技是应用技术手段和创新理念来提升金融服务效率的重要途径。而其中的API接口则是实现金融科技的关键。API接口的简单定义是提供计算机程序之间通信的规范和工具&#xff0c;提供一种方法和数据的交互形式&#xff0c;以便开发人员能够利用现有的软件来创建新的应用和服务…

【区块链 + 航运物流】运力链 | FISCO BCOS应用案例

根据速达物联的战略规划&#xff0c;2023年物流平台将由单一调度平台升级为物流生态平台。基于此&#xff0c;虎彩集团采用 FISCO BCOS区块链技术构建的运力链&#xff0c;可以帮助客户实现资源广泛快速连接、合作伙伴间的高效协同和低摩擦交 易&#xff0c;最终达成可信同城货…

五、Centos7-安装Jenkins

目录 一、基础环境准备 1.安装JDK 2.安装Tomcat 二、安装Jenkins 1.配置Jenkins插件镜像源 2.问题&#xff1a;进入manager jenkins页面报错 3.配置Git 4.配置jdk 三、重新安装Jenkins 四、另一种Centos安装jenkins的方式--最终可用版 克隆了一个base的虚拟机&#x…

Upload-Lab第19关:用图片马和条件竞争技巧,轻松应对上传限制!

简介 在upload-labs的第19关中,攻击是通过上传图片马来实现的。与第18关相比,这一关增加了对文件后缀名的检测,禁止直接上传 PHP 文件。因此,你需要上传一个图片马,并使用文件包含漏洞来访问它。具体步骤与第18关类似。 这里有一个细节,由于可能是这个靶场的作者的某种原…

老师如何制作分班查询系统?

随着新学期的钟声敲响&#xff0c;老师们又迎来了一年中最忙碌的时期。不仅要处理日常的教学准备工作&#xff0c;还要面对一项重要而繁琐的任务——新生分班。分班完成后&#xff0c;老师们还需要将分班结果及时准确地通知给每一位家长&#xff0c;确保信息的传递无误。这项工…

p8 Run的流程和Docker原理

docker run的运行原理图 docker是怎么工作的&#xff1f; docker是一个cs的一个结构的系统docker的守护进程运行在宿主机上面通过socket进行访问 其实就是看下面的这个图&#xff0c;通过客户端的命令来操作docker的守护进程然后启动一些容器&#xff0c;默认容器是不启动的 …

语言基础/单向链表的构建和使用(含Linux中SLIST的解析和使用)

文章目录 概述简单的链表描述链表的术语简单实现一个单链表 Linux之SLIST机理分析结构定义单链表初始化单链表插入元素单链表遍历元素单链表删除元素 Linux之SLIST使用实践纯C中typedef重命名带来的问题预留 概述 本文讲述了数据结构中单链表的基本概念&#xff0c;头指针、头…

Go语言操作文件上传和下载应用教程

Go语言操作文件上传和下载应用教程 我们在使用Go的日常开发中&#xff0c;经常会遇到对文件的处理&#xff0c;例如&#xff1a;上传、下载、读写等&#xff08;详情见Go 文件操作基本方法大全&#xff09;&#xff0c;且我们在实际应用中&#xff0c;基本都是使用框架自带的文…

电商项目DevOps一体化运维实战

主要讲了git和jkins的使用&#xff0c;其中maven的一个插件还挺好用的&#xff0c;主要可以用来查看哪些类没有使用&#xff0c;哪些导入的包是多余的等。这里展示一下用法。至于git和jkins的搭建后续再操作。 maven插件的使用&#xff1a; 编译后就可以在target下面看到这个h…

[ACL 2024] Revisiting Knowledge Distillation for Autoregressive Language Models

Contents IntroductionMethodRethinking Knowledge Distillation for Autoregressive LMsImproving Knowledge Distillation with Adaptive Teaching Modes ExperimentsReferences Introduction 作者提出 Autoregressive KD with Adaptive Teaching Modes (ATKD)&#xff0c;通…

5000套精美PPT免费分享

目录 部分展示目录 几乎包含各种应用场景的PPT模板 这里只展示部分目录 部分展示目录 ##PPT下载 链接&#xff1a;https://pan.baidu.com/s/1ckvN9xeMR82hL30lHXfJ0g 提取码&#xff1a;ZYNB 点击下载&#xff0c;记得点个赞哦

3 pytest Fixture

目录 3.1 通过 conftest.py 共享 fixture3.2 使用 fixture 执行配置及销毁逻辑3.3 使用 --setup-show 回溯 fixture 的执行过程3.4 使用 fixture 传递测试数据3.5 使用多个 fixture3.6 指定 fixture 作用范围3.7 使用 usefixtures 指定 fixture3.8 为常用 fixture 添加 autouse…

MySQL从入门到精通(第9-10章)

文章目录 9 子查询9.1 需求分析与问题解决9.1.1 实际问题9.1.2 子查询的使用9.1.3 子查询的分类 9.2 单行子查询9.2.1 单行比较操作符9.2.2 代码示例9.2.3 HAVING中的子查询9.2.4 CASE中的子查询9.2.5 子查询中的空值问题9.2.6 非法使用子查询 9.3 多行子查询9.3.1 多行比较操作…

linux系统使用 docker 来部署web环境 nginx+php7.4 并配置称 docker-compose-mysql.yml 文件

Docker是一个开源的容器化平台&#xff0c;旨在简化应用程序的创建、部署和管理。它基于OS-level虚拟化技术&#xff0c;通过将应用程序和其依赖项打包到一个称为容器的标准化单元中&#xff0c;使得应用程序可以在任何环境中快速、可靠地运行。 Docker的优势有以下几个方面&a…

如何使用ssm实现基于java斗车交易系统设计与实现+vue

TOC ssm082基于java斗车交易系统设计与实现vue 系统概述 1.1 概述 随着社会的快速发展&#xff0c;计算机的影响是全面且深入的。人们的生活水平不断提高&#xff0c;日常生活中人们对斗车交易方面的要求也在不断提高&#xff0c;需要咨询的人数更是不断增加&#xff0c;使得…

【第69课】Java安全JWT攻防Swagger自动化算法签名密匙Druid未授权

免责声明 本文发布的工具和脚本&#xff0c;仅用作测试和学习研究&#xff0c;禁止用于商业用途&#xff0c;不能保证其合法性&#xff0c;准确性&#xff0c;完整性和有效性&#xff0c;请根据情况自行判断。 如果任何单位或个人认为该项目的脚本可能涉嫌侵犯其权利&#xff0…