JQuery插件ajaxfileupload上传文件无需创建form表单

Query插件ajaxfileupload上传文件无需创建form表单,这样就可以解决在form嵌套中ajax表单提交出现的问题

页面代码:(需要把ajaxfileupload.js包含进来)

<!-- 引入相关的js文件,相对路径  -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/ajaxfileupload.js"></script>

<!-- 执行上传文件操作的函数 -->
      <script type="text/javascript">

       function uploadFile() {

               $.ajaxFileUpload({url:path + "/compoundbatchsearch/upLoadTxtFile.do",
                                          secureuri:false,
                                          fileElementId:"batchSearchFile", //页面中File标记 id的值
                                          dataType:"XML",
                                          success:function (data, status) {
                                          uploadcallback(data);
                                          },
                                         error:function (data, status, e) {
                                         uploadcallback("occurError");
                                         }
                                });

              }

 

<div id="search_area" style="position: absolute; z-index: auto; ">
      <input id="uploadFile" accept="text/html" type="file" name="uploadFile" />
      <input type="button" id="upload" value="uploadFile()" />
 </div>

 

服务器端代码:(应用了spring2.5,需要在spring配置文件中定义multipartResolver bean)

@Controller
public class CompoundBatchSearchController {
   
    private static final Logger logger = Logger.getLogger(CompoundBatchSearchController.class);
   
    @Resource(name="compoundBatchSearchService")
    private ICompoundBatchSearchService compoundBatchSearchService;
   
    @RequestMapping
    public void upLoadTxtFile(HttpServletResponse response, HttpServletRequest request) {
        logger.info("upload txt file action...");
        // clear session before parese txt file
        if (request.getSession().getAttribute(Constants.RESULT_IDS) != null) {
            request.getSession().removeAttribute(Constants.RESULT_IDS);
        }
       
        try {
            // upload file
            MultipartHttpServletRequest mhs = (MultipartHttpServletRequest) request;
            MultipartFile mf = mhs.getFile("batchSearchFile");
            File file = FilePathHelper.uploadFile(mf, Constants.UPLOAD_TXT);
            logger.info("upload file success!");
            Map<String, List<String>> idsMap = fetchIDsFromFile(file, response);
           
            if (null == idsMap || idsMap.isEmpty()) {
                logger.error("cannot read data form file!");
                MessageUtils.outputJSONResult("empty", response);
                return;
            }
            logger.info("read upload file success!");
            List<String> casNumbers = idsMap.get("CAS");
            List<String> mdlNumbers = idsMap.get("MDL");
            if (casNumbers != null && !casNumbers.isEmpty() && mdlNumbers != null && !mdlNumbers.isEmpty()) {
                logger.error("It contains invalid data in upload file");
                MessageUtils.outputJSONResult("dataError", response);
                return;
            }
           
            if (casNumbers != null && !casNumbers.isEmpty()) {
                List<Long> ids = compoundBatchSearchService.getStructureIdsByCasNo(casNumbers);
                if (ids != null) {
                    request.getSession().setAttribute(Constants.RESULT_IDS, ids);
                }
            }
           
            if (mdlNumbers !=null && !mdlNumbers.isEmpty()) {
                List<Long> ids = compoundBatchSearchService.getStructureIdsByMdl(mdlNumbers);
                if (ids != null) {
                    request.getSession().setAttribute(Constants.RESULT_IDS, ids);
                }
            }
            MessageUtils.outputJSONResult("success", response);
           
        } catch (Exception e) {
            logger.error(e.getMessage(), e);
            MessageUtils.outputJSONResult("occurError", response);
        }
    }

 

spring中定义的upload部分:

<!-- upload file -->
<bean id="multipartResolver"         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxInMemorySize">
            <value>20480</value>
        </property>
        <property name="defaultEncoding">
            <value>UTF-8</value>
        </property>
 </bean>

Ajax上传文件(无需表单)实测可用 ajax上传项目,不需要表单和设置表单二级制数据传输,直接选择文件就异步上传了,绝对靠谱,也可融合与自己的项目里面去,简单易操作,看了基本都明白。 立即下载

相关推荐

A-Level经济例题解析及练习Opportunity Cost

例题Question: Opportunity CostYou are selling your 1996 Mustang.&nbsp; You have already spent $1000 on repairs.&nbsp;At the last minute, the transmission dies.&nbsp; You can pay $600 to have it repaired, or sell the car “as is.”In each of the fol

Alevel3的博客 744

Jquery不使用form表单异步上传文件的方法

现在的项目中需要使用到不刷新页面的方式实现上传文件,实现方法如下:html代码:文件:&lt;input id="file" type="file" name="file"/&gt; &lt;button id="upload"&gt;上传文件&lt;/button&gt; js代码: $(function () { $("#upload").cl

张全健的博客 7082

UnicodeEncodeError: ‘ascii‘ codec can‘t encode characters in position 0-4: ordinal not in range(128)

python3报错处理:UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position 0-4: ordinal not in range(128) 一、报错场景 // 报错代码 Traceback (most recent call last): File "test_autoo3_2.py", line 214, in <module> main() File "test_autoo3_2.py",

浪里小飞侠的博客 4201

通过ajax上传不用form,通过Ajax使用FormData对象无刷新上传文件方法

写在前面:本文说的这个方案有浏览器兼容性问题;所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+,对兼容性比较敏感的网站慎用。在工作中遇到了一个问题:在一个页面中,有4块内容,每块内容都包含一个图片上传功能,希望可以实现一键把这四块内容都上传上去。我没有用插件实现上传功能,就是用的input[type=fi...

weixin_39921087的博客 1529

Maven的下载安装配置教程(详细图文)

目录 一、简单了解一下什么是Maven 二、maven的下载 三、maven的安装 四、maven的环境变量配置 五、setting文件配置 六、开发工具配置Maven 一、简单了解一下什么是Maven Maven就是一款帮助程序员构建项目的工具,我们只需要告诉Maven需要哪些Jar 包,它会帮助我们下载所有的Jar,极大提升开发效率。 1.Maven翻译为“专家“, ”内行”的意思,是著名Apache公司下基于Java开发的开源项目。 2.Maven项目对象模型(POM)是一..

bakelFF的博客 12万+

纯原生Ajax2.0(不用FormData)实现表单及文件上传

一、概述 通常我们用Ajax上传文件的时候都会用到FormData,这种方式比较简单。今天介绍一种用纯Ajax上传文件的方式 表单数据可以用一下四种方式进行发送: 1.method:POST,enctype:application/x-www-form-urlencoded (默认编码方式); 2.method:POST,enctype:text/plain; 3.method:POST,enct...

weixin_34356138的博客 2202

Linux USB Gadget框架解析:从设备模拟到驱动开发实战

USB(通用串行总线)是现代计算机系统中应用最广泛的外设连接标准,其主从动态切换的特性使其在嵌入式系统中扮演着双重角色。与I2C、SPI等固定主从架构不同,USB设备需要同时支持主机(Host)和从机(Device)两种模式,这催生了Linux内核中独特的USB Gadget框架。该框架通过分层设计,将硬件控制器驱动(UDC)、功能逻辑(Function)和配置管理(Configfs)解耦,实现了灵活的设备模拟能力。在工程实践中,开发者可以利用Gadget框架快速实现U盘、网络适配器、串口转换器等常见USB

weixin_28007513的博客 561

jquery form插件(ajax)上传文件实现及原理

原理: jquery form插件ajax上传文件的原理, 1、浏览器实现了XMLHttpRequest level2规范的,则使用xhr直接提交文件。通常来说chrome、firefox都实现了xhr level2规范 2、浏览器只实现了XMLHttpRequest level2规范的,则使用form+iframe方式,实现页面无刷新上传文件。通常来说,IE8及以下都属于此列。

wangjun5159的专栏 7256

基于卷积神经网络的球罐结构损伤识别

球罐结构损伤识别方法研究 摘要:本研究针对球形储罐(球罐)结构健康监测需求,提出基于卷积神经网络(CNN)的损伤识别方法。通过ANSYS有限元仿真构建包含5种裂纹深度的500组振动信号数据集,设计包含卷积层、池化层和全连接层的CNN网络架构。实验结果表明,该方法在训练集和测试集上分别达到98.4%和96.0%的准确率,验证了其在球罐焊缝损伤识别中的有效性。研究提供了完整的MATLAB实现代码,为球罐结构智能化监测提供了技术参考。 关键词:球罐结构;卷积神经网络;损伤识别;振动信号;深度学习

AI的内部世界的博客 120

Ubuntu Rtx3090 Cuda11.7 安装 pytorch3d

pytorch ubuntu pytorch3d 安装

G果的博客 2273

使用ajax代替form表单向服务器同时提交多个数据和多个文件

使用ajax代替form表单向服务器同时提交多个数据和多个文件JSP代码 JSP代码 一个form表单包含多个数据以及多个文件 在form表单中加入属性 enctype=“multipart/form-data” 表示此表单支持文件上传; 需正确引用jquery, jquery.form等js文件。 ```html <!--表单内容--> <form id="form-survey-record" method="post" action="" enctype="multipart/

dllmha的博客 666

【保姆级教程】基于UNet++&MobileNetv2的语义分割模型从训练到RK3588部署:让边缘AI落地效率提升300%

通过SMP库一键构建encoder_name="mobilenet_v2", # 选择MobileNetv2作为骨干encoder_weights="imagenet", # 加载预训练权重加速收敛in_channels=3, # 输入图像通道数(RGB)classes=29, # Cityscapes数据集类别数activation=None # 输出无激活,便于后续损失计算本教程从“模型设计-训练-转换-边缘部署”全链路拆解了。

m0_71589036的博客 89

ajax无刷新文件上传

在PHP网站开发中,文件上传功能时常用到。随着WEB技术的发展,用户体验成为衡量网站成功与否的关键,今天和大家分享如何在PHP中利用Jquery实现Ajax方式文件上传功能的例子,其中使用到了Jquery插件AjaxFileupload,其可以实现单个文件和多文件上传功能。 AjaxFileUpload   Jquery插件AjaxUpload实现文件上传功能时无需创建form表单,即可实现A

riancy6 490

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

dwz ajax上传文件,DWZ中怎样整合JQuery的ajaxFileUpload上传插件

用户提问jQuery插件AjaxFileUpload可以实现ajax文件上传,需要jQuery库文件和ajaxfileupload.js 一.引入部分 二.部分 注意:使用AjaxFileUpload插件上传文件可不需要form ……相关html代码…… 三.js部分 function changImg(){ $.ajaxFileUpload ( { url:'XX...推荐答案jQuery插件A...

weixin_35480412的博客 223

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

springmvc带文件上传的form表单提交,用 jquery的ajaxfileupload或使用dropzone上传图文详解

方法一和方法二处理思路一致,分两步提交:第一步 提交图片到文件服务器,并返回图片所在文件服务器的地址如:xxx/aaa.jpg,把文件地址(xxx/aaa.jpg)放到页面隐藏域。.第二步 提交表单 ,把表单数据和文件地址(xxx/aaa.jpg)记录到数据库。此方式数据库中记录的只是图片的地址,图片真正存放的位置是文件服务器。为了方便说明,称这种提交方式为两步提交。 方法三的处理思路是把表单数

ice-wee的专栏 2万+

jQuery插件AjaxFileUpload可以实现ajax文件上传

jQuery插件AjaxFileUpload可以实现ajax文件上传 jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法。 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 http://www.phpletter.

Rose19891213的专栏 3546

ajax上传form表单或者文件以及结合validate验证

ajax上传form表单,jquery.form上传form表单,ajax上传文件

柒小柒七的博客 3004

jquery插件--ajaxfileupload.js上传文件原理分析

英文注解应该是原作者写的吧~说实话,有些if判断里的东西我也没太弄明白,但是大致思路还是OK的。jQuery.extend({ createUploadIframe: function (id, uri) {//id为当前系统时间字符串,uri是外部传入的json对象的一个参数 //create frame var frameId = 'jUploadFra

it_man的专栏 4万+

Query插件ajaxfileupload上传文件无需创建form表单

Query插件ajaxfileupload上传文件无需创建form表单,这样就可以解决在form嵌套中ajax表单提交出现的问题页面代码:(需要把ajaxfileupload.js包含进来)    <script type="text/javascript" src="js/jquery.js">    <script type="text/javascript" sr

java_kevin的专栏 2571

ajaxFileUpload ajax上传文件!jquery插件

function ajaxFileUpload(){                jQuery.ajaxFileUpload(                    {                 url:'',

展望 2638

不使用form进行上传文件图片,使用jQuery上传文件图片

1.前台代码    script type="text/javascript" src="jquery-1.11.1.min.js">script> script type="text/javascript" src="ajaxfileupload.js">script> script type="text/javascript"> function ajaxFileUpl

sinat_33388558的博客 7944

thinkphp+ajaxfileupload 异步上传图片

借助插件实现异步上传图片的,需要引用Jquery。 HTML: 照片 <input type="file" id="file{$voc.id}" name="file{$voc.id}" onchange="ajaxFileUpload(this.id)" accept="image/*" style="display: none;" /> 一个a连接供选择照片,触发file的click

云上人间钦自赏 3940

jQuery ajax + ajaxfileupload.js插件 实现无刷新文件上传

jQuery ajax + ajaxfileupload.js插件 实现无刷新文件上传

胡杰的专栏 2167

ajax表单提交带文件上传,带文件上传的form表单提交, jquery的ajaxfileupload+插件dropzone图文详解...

不是建议你,而是强制要求:跳过方法一直接看方法二。方法一写的太随意了对不起你们,看方法二吧,使用插件dropzone.js,方法一和方法二后台代码都一样。方法二简单好上手,学习成本低。方法一:jquery的ajaxfileupload方法 一整体思路概要介绍:概要介绍之jsp姓名:性别:地址:onclick="return ajaxDemoUpload();" value="上传" /> 概...

weixin_34118910的博客 913

文件上传JQuery插件 ajaxFileUpload 不严谨的bug

前言 广大的开源中国社区博友们,我是一名刚出道的java程序员,由于工作中需要做前端页面一块开发,所以在JavaScript也每天在使用,每天在学习,在我提出bug之中如果你觉得这个问题我说的不对欢迎在在下方评论区深怼我哦! 简介 我在工作中使用ajaxFileUpload这个JQuery插件...

218
上一篇: JXL操作Excel
下一篇: Dom4j的使用(全而好的文章)
goofy521
博客等级 码龄19年 2粉丝 20原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值