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

news2024/11/26 10:15:17

这个框架是用来给前端设置文件上传的按钮的。
首先要明白,前端向后端发送请求的方式有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.coloradmin.cn/o/2063239.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Axios介绍;前后端分离开发的介绍;YAPI的使用;Vue项目简介、入门;Elementui的使用;nginx介绍

1 Ajax 1.1 Ajax介绍 1.1.1 Ajax概述 我们前端页面中的数据&#xff0c;如下图所示的表格中的学生信息&#xff0c;应该来自于后台&#xff0c;那么我们的后台和前端是互不影响的2个程序&#xff0c;那么我们前端应该如何从后台获取数据呢&#xff1f;因为是2个程序&#xf…

基于 Dots + GPU Instance 的大规模物体渲染

之前写的两篇开放世界技术栈都是公司其他同事做的&#xff0c;所以很多细节了解不详细。但这次是全程我自己搭建的轮子&#xff0c;可以讲得稍微详细些。 之前写的大规模物件渲染的 GPU 版本&#xff0c;虽然渲染量大效率高&#xff0c;但是有个很致命的缺陷&#xff1a;无法与…

Azure OpenAI citations with message correlation

题意&#xff1a;“Azure OpenAI 引用与消息关联” 问题背景&#xff1a; I am trying out Azure OpenAI with my own data. The data is uploaded to Azure Blob Storage and indexed for use with Azure AI search “我正在尝试使用自己的数据进行 Azure OpenAI。数据已上传…

行业应用 | 桥田MMC磁力换模系统-冲压场景案例分享

随着市场竞争的日益加剧&#xff0c;制造形态从单品种大批量转变为多品种小批量&#xff0c;品种的多样化对模具的多样化产生了需求&#xff0c;在更换产品品类时&#xff0c;首先需要更换加工模具。冲压是金属加工中的典型场景&#xff0c;如何缩短冲压模具的更换时间&#xf…

【Hot100】LeetCode—23. 合并 K 个升序链表

目录 1- 思路优先队列 2- 实现⭐23. 合并 K 个升序链表——题解思路 3- ACM 实现 原题连接&#xff1a;23. 合并 K 个升序链表 1- 思路 优先队列 1- 提供的数据结构&#xff1a;ListNode[] lists2- 由于提供的数据结构已经是有序的&#xff0c;不能通过指针实现是因为不知道一…

基于I2S和esp-now协议制作esp32对讲机

基于I2S和esp-now协议制作esp32对讲机 1.概述 这篇文章介绍基于I2S和esp-now协议制作对讲机&#xff0c;他的实现需要在ESP32开发环境的2.0.10版本号下才能成功&#xff0c;高版本号的源码有改动会导致编译失败。 安装ESP32 2.0.10版本&#xff1a; https://brucelong.blog.c…

2 nestjs 设计模式

回顾 MVC MVC&#xff08;Model-View-Controller&#xff09;设计模式是一种常用于软件开发的架构模式&#xff0c;旨在分离应用程序的不同部分&#xff0c;使得它们可以独立地开发、测试和维护。它将应用程序分为三个主要组件&#xff1a; Model&#xff08;模型&#xff09;…

什么牌子的开放式耳机性价比高?五款高口碑精品推荐!

由于传统入耳式耳机可能对耳道健康造成长期影响&#xff0c;许多人开始偏好选择开放式耳机的非侵入式设计。这种耳机有助于减少耳内湿润、细菌增长&#xff0c;以及耳道闷热的不适感。为了帮助大家在众多产品中挑选合适的开放式耳机&#xff0c;我将列举一些市场反馈良好的款式…

C#中的WebClient与XPath:实现精准高效的Screen Scraping

在现代互联网中&#xff0c;Screen Scraping&#xff08;屏幕抓取&#xff09;已成为从网页中提取信息的重要技术。对于C#开发者来说&#xff0c;WebClient和XPath是实现高效抓取的重要工具。本文将概述如何使用C#中的WebClient类结合XPath技术&#xff0c;实现精准高效的Scree…

探索科技潮流新领地厦门凯酷全科技有限公司抖音小店

在这个日新月异的数字时代&#xff0c;科技不仅深刻改变了我们的生活方式&#xff0c;更成为连接消费者与未来生活的桥梁。今天&#xff0c;就让我们一起走进厦门凯酷全科技有限公司的抖音小店&#xff0c;感受一场科技与时尚的完美碰撞&#xff0c;体验未来生活触手可及的魅力…

Python 和 PyCharm 安装(傻瓜式)

为什么要安装Python&#xff1f; 当我们写 python 代码的时候&#xff0c;需要有环境的支持&#xff0c;才可以运行代码。而 python 的安装支持了两个主要部分&#xff0c;分别是解释器和标准库。当我们安装完成&#xff0c;就可以使用python里面的标准库来写代码&#xff0c;而…

Linux 内核源码分析---netfilter 框架

iptables是用户用来管理和配置防火墙规则的一种策略&#xff0c;但是实际解析规则并按照规则实施产生作用的是Netfilter。 iptables 与协议栈内有包过滤功能的 hook 交互来完成工作&#xff0c;这些内核 hook 构成了 netfilter 框架。每个进入网络系统的包&#xff08;接收和发…

Java Web —— 第七天(Mybatis案例 员工管理2)

新增员工 EmpController类 PostMappingpublic Result save(RequestBody Emp emp){log.info("新增员工操作,emp:{}",emp);empService.save(emp);return Result.success();} EmpServiceImpl实现类 //新增员工Overridepublic void save(Emp emp) {//补充基础属性 创…

jmeter中添加ip欺骗

1、首先在本机电脑中通过配置文件创建添加ip的配置文件&#xff0c;先创建一个txt格式的&#xff0c;直接修改文件名以及后缀为ips.bat 2、编辑该ips.bat文件&#xff0c;在文件中输入如下内容&#xff0c;用于快速给本机添加ip地址&#xff0c;&#xff08;2&#xff0c;1&…

今年奥运会的场馆设计,竟然藏着这样的黑科技!

随着奥运会的盛大开幕&#xff0c;全球观众不仅关注运动员的精彩表现&#xff0c;也被奥运场馆的壮丽设计所吸引。这些场馆不仅外观炫酷&#xff0c;功能齐全&#xff0c;更重要的是背后应用了一系列先进的技术和材料&#xff0c;其中最为亮眼的就是巴黎奥运会永久性体育场馆之…

“救命快刊”:升到2区,IF3.1,水平低也无俱,专家意见中肯不难为人

1、期刊简介&#xff1a; International Journal of Green Energy • 出版社&#xff1a;Taylor and Francis • 影响因子&#xff1a;3.1 • 期刊分区&#xff1a;JCR2/3区&#xff0c;中科院4区 • 检索数据库&#xff1a;SCI&EI 2、研究领域&#xff1a; 分享了能源…

开源好用的堡垒机工具Jumpserver

Jumpserver是一个由杭州飞致云信息科技有限公司&#xff08;FIT2CLOUD飞致云&#xff09;开发的开源堡垒机系统&#xff0c;旨在帮助企业构建和强化运维安全审计能力。 以下是关于Jumpserver的详细介绍&#xff1a; 一、基本概述 定义&#xff1a;Jumpserver是一个开源的堡垒…

CTFshow之RCE代码命令远程执行第53关到第64关详细讲解。可私信!

手眼通天和大人。 --真锅和 引言&#xff1a;今天继续ctf之旅&#xff01;&#xff01;解决53关到64关 ps&#xff1a;今天是8.22&#xff0c;重新回归开始填坑&#xff0c;先发个废品 一、实验准备 1、ctf网址&#xff1a;ctf.show 2、工具&#xff1a;fi…

cmd发送邮件:如何通过命令提示符发邮件?

cmd发送邮件的安全性考量&#xff1f;如何设置cmd发送邮件&#xff1f; 通过命令提示符发送邮件则提供了一种便捷且高效的方法&#xff0c;特别是在自动化任务和脚本化工作流程中。AokSend将介绍如何通过命令提示符实现发送邮件&#xff0c;并讨论其应用场景和注意事项。 cmd…

上线一天销售额超15亿!《黑神话:悟空》火爆全网的技术秘诀!

昨日&#xff08;8月20日&#xff09;上午&#xff0c;国产游戏《黑神话&#xff1a;悟空》正式发售&#xff0c;在全球游戏市场掀起巨大狂潮&#xff01;上线第一天在Steam的PCCU&#xff08;同时在线用户数峰值&#xff09;排名已成为第三&#xff01; 此款游戏上线即回本。…