精华内容
下载资源
问答
  • html选择文件后立即上传,不用执行表单提交。输入款选择文件后立即执行上传操作,无需提交表单,html+jq 简单易用
  • html 中 file 类型的 input 输入框,可以将本地的文件...input file选择文件后自动上传可以使用js代码中的FormData对象,利用 change 触发上传,FormData对象:此对象用以将数据编译成键值对,以便用XMLHttpReques...

    html 中 file 类型的 input 输入框,可以将本地的文件上传到网站的服务器,但它的上传需要 form 表单提交触发的。而今天我们要说一说,file 类型的输入框在选择本地文件后,自动上传的方法。

    c5f8f9ce9c8f2a6df7dab93496324ab8.png

    input file选择文件后自动上传

    可以使用js代码中的FormData对象,利用 change 触发上传,

    FormData对象:此对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。

    代码如下:

    html代码

    jq代码

    $('body').on('change','#upLoad',function(){ var formData = new FormData(); var name = $($(this)).val(); var files = $($(this))[0].files[0]; formData.append("file
    展开全文
  • html 中 file 类型的 input 输入框,可以将本地的文件...input file选择文件后自动上传可以使用js代码中的FormData对象,利用 change 触发上传,FormData对象:此对象用以将数据编译成键值对,以便用XMLHttpReques...

    html 中 file 类型的 input 输入框,可以将本地的文件上传到网站的服务器,但它的上传需要 form 表单提交触发的。而今天我们要说一说,file 类型的输入框在选择本地文件后,自动上传的方法。

    c370c643b96e114088e7cfb96adc8aa7.png

    input file选择文件后自动上传

    可以使用js代码中的FormData对象,利用 change 触发上传,

    FormData对象:此对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。

    代码如下:

    html代码

    jq代码

    $('body').on('change','#upLoad',function(){ var formData = new FormData(); var name = $($(this)).val(); var files = $($(this))[0].files[0]; formData.append("file
    展开全文
  • 选了几个点击上传选择文件结果没有反应,求大佬帮帮忙,解惑。 主要就是讲from的提交地址换成自己的了 <code><!DOCTYPE html> <html lang="zh"> <head> <meta...
  • 根据上篇文章选择文件后,接下来便是上传文件 我这里上传文件在js这边采取的是for循环添加,添加file到new的formData,然后new一个XMLHttpRequest对象,因为是文件,所以用post提交,然后用send发送数据xhr.send...

    开发工具与关键技术:Visual Studio 2015 JavaScript
    作者:宁佐潮
    撰写时间:2019.4.18
    根据上篇文章选择文件后,接下来便是上传文件
    我这里上传文件在js这边采取的是for循环添加,添加file到new的formData,然后new一个XMLHttpRequest对象,因为是文件,所以用post提交,然后用send发送数据xhr.send(formData);
    最后当i自加到选择文件的数量时,便是循环添加到了最后,输出一下添加的情况
    在这里插入图片描述

    //保存批量上传文件
    function SaveBatch() {
        layer.alert("上传文件较多时,请耐心等待!", function () {
            var file = $("#filesArry")[0].files;
            var succeed = 0;
            var defeated = 0;
            var layuiIndex;
            if (file.length > 0) {
                //批量保存的歌曲文件上传
                for (var i = 0; i < file.length; i++) {
                    var formData = new FormData();
                    formData.append("file", file[i]);
                    //=new一个XMLHttpRequest对象
                    var xhr = new XMLHttpRequest();
                    //=注册监听事件
                    //发送成功事件
                    xhr.onload = function (event) {
                        var strText = event.currentTarget.responseText;
                        if (strText == "true") {
                            succeed++;
                        } else {
                            defeated++;
                        }
                    };
                    //上传失败事件
                    xhr.onerror = function (event) {
                        var strText = event.currentTarget.responseText;
                        if (strText == "true") {
                            succeed++;
                        } else {	
    defeated++;		
    }
                    };
                    //上传进度---会不断被调用
                    xhr.upload.onprogress = function (event) {
                        if (event.lengthComputable) {
    // event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0
                  console.log(event.total + "--->" + event.loaded + "----->" + 
    (event.loaded / event.total * 100) + "%");
                        }
                    };
                    //上传文件一定要用POST方式提交
                    xhr.open("POST", "UpEeditorFilesArry");
                    //打开加载层
                    layuiIndex = layer.msg('上传中...', {
                        icon: 16,
                        time: 0,
                        shade: 0.3
                    });
                    //发送数据
                    xhr.send(formData);
                    if (i == (file.length - 1)) {
                        tabSinger.reload();
                        layer.close(layuiIndex);//关闭加载层
                        $("#modalInsertID").modal('hide');
                        layer.alert("添加成功" + succeed + "个!失败"+ defeated + "个");
                    }
                }
            } else {
                layer.alert("请选择文件");
            }
    });		
    }
    
    

    控制器这边就是根据传过来的文件信息,判断下不是空,判断下文件上传的指定路径存在否,然后把文件添加到指定路径

    public ActionResult UpEeditorFilesArry(HttpPostedFileBase file)
    {
        ReturnJsonVo returnJson = new ReturnJsonVo();
        try
        {
            if (file != null)
            {
                string fileName = file.FileName;
                if (!Directory.Exists(Server.MapPath("~/Content/music")))
                {
                    Directory.CreateDirectory(Server.MapPath("~/Content/music"));
                }
                string filePath = Server.MapPath("~/Content/music/") + fileName;
                file.SaveAs(filePath);
                string str = fileName;
                returnJson.State = true;
                returnJson.Text = str;
            }
            else
            {
                returnJson.Text = "文件为空!";
            }
        }
        catch (Exception)
        {
            returnJson.Text = "数据异常";
        }
        return Json(returnJson, JsonRequestBehavior.AllowGet);
    }
    
    

    在这里插入图片描述

    展开全文
  • html 中 file 类型的 input 输入框,可以将本地的文件...input file选择文件后自动上传 可以使用js代码中的FormData对象,利用 change 触发上传, FormData对象:此对象用以将数据编译成键值对,以便用XMLHttpReq...

    html 中 file 类型的 input 输入框,可以将本地的文件上传到网站的服务器,但它的上传需要 form 表单提交触发的。而今天我们要说一说,file 类型的输入框在选择本地文件后,自动上传的方法。
    input file选择文件后自动上传
    可以使用js代码中的FormData对象,利用 change 触发上传,
    FormData对象:此对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。
    代码如下:
    html代码

    jq代码
    $(‘body’).on(‘change’,’#upLoad’,function(){
    var formData = new FormData();
    var name = (((this)).val();
    var files = (((this))[0].files[0];
    formData.append(“file”, files);
    formData.append(“name”, name);
    //另外加的参数
    formData.append(“act”, “PostImg”);
    var index = layer.msg(‘正在提交中…’);
    $.ajax({
    url: ‘img.php’,
    type: ‘POST’,
    data: formData,
    processData: false,
    contentType: false,
    dataType: ‘json’,
    success:function (res) {
    alert(‘上传成功’);
    }
    ,error:function (res) {
    alert(‘错误’);
    }
    });
    })
    本文章来源:
    https://www.feiniaomy.com/post/463.html

    展开全文
  • 说明:对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参 数是比较麻烦,所以一般选择采用apache的开源工具common-...
  • 提交表单上传文件

    2017-11-02 14:48:38
    在保存时,选择图片(对象的一个属性),没有跳入action中,直接返回保存失败。 后来请教高手帮我检查,是提交的form表单没有enctype="multipart/form-data"属性 可以配置全局result  /WEB-INF/error.jsp
  • 提交表单选择上传文件 formidable自动生成了空文件 解决办法: 打开模块中lib下面的incoming_form.js,找到里面的handlePart方法,在182行,紧接着在下面加入 if (part.filename == "") { return; } 参考...
  • 选择文件后自动上传文件

    万次阅读 2016-05-22 10:36:09
    想要一个选择文件就自动上传的效果,但之前的 都是写在form表单中来提交的。借助jquery的ajaxfileupload.js,可以这样子弄: 正面: function uploadFile(obj, type) { $.ajaxFileUpload({ url : ...
  • HTML中链接或图片模拟文件控件file input的方法,以及选择后自动提交文件 上传图片
  • 默认的swfupload选择文件后,会自动开始上传,比较讨厌.因为我需要的还要等表格填完, 提交form的时候一起上传. 呵呵,按如下修改(兼容flash9/10,swfupload2.1.0(beta)/2.2.0): handles.js function ...
  • 我要实现的效果就是点击上传文件,选择文件后点击ok(也就是提交表单后在上传)其实就是手动上传文件。下面我来介绍一下我的做法和我遇到的一些坑。 2.实现步骤 1.引入所需antd的部件 import { Table, Button, ...
  • 工作中很容易遇到一个from表单中除了填一些基本信息外,还需要上传个头像或者文件也实属正常需求,如果是两者功能拆分开实现还是挺容易的,但是如果要一起提交的话,...javaWeb文件上传下载(复制粘贴即可使用) ja...
  • 虽然现在很多都是使用大平台的对象存储存放应用中的文件,但有时小项目还是... 打开选择"body"->"form-data",key悬浮的时候选择“File”, 然后value会出现一个文件按钮。2. 本地的上传方法测试一下打印一下...
  • 在设置了上传文件最大限制为10M以后,选择了3M的pdf上传提交后连接被重置了。。。 我的代码: //设置上传单个文件的大小的最大值,目前是设置为1024*1024字节,也就是1MB upload.setFileSizeMax(1024 * ...
  • 上传文件

    2019-06-08 13:09:57
    通过form表单post方法提交文件,文件内容放置输入框,输入框类型为文件类型,可存放图片。 要想上传文件,首先需要点击选择上传文件,那么...选择文件后该如何上传呢?上传文件也就是一个提交表单的过程,使用...
  • 上传文件应该是除了提交数据以外最常用的一种功能了,上篇已经说了使用原生net提交数据,上传文件提交数据主要有2点不同,1.请求头不同 2.要选择本地待上传文件。 下面就以上传图片为例。 一、前段html页面 ...
  • Layui原生upload模块不支持文件上传进度条显示,百度,谷歌找了一下不太适用。后面找到一个别人修改好的JS,替换上去,修改一下页面显示即可使用,一下是部分代码HTML:选择多文件文件名大小上传进度状态操作开始上传...
  • 有时候,我们更新界面信息时会遇到,选择图片,并不能预览图片,必须提交数据库才能在页面上显示出来,这样我们该怎样办呢?起始jq为我们提供了两个方法change()和URL.createObjectURL() 直接掉用就行了,废话少说,...
  • 项目开发过程中,涉及到了图片上传和文件...选择文件,点击提交,执行结果如下: 由上面执行结果的第一张图可知,Form表单中的action已被执行;由上面执行结果的第二张图可知,所选文件及相关信息已被上传。
  • php文件上传

    2016-11-28 16:49:57
    文件上传是网络生活中经常使用的一个功能。使用PHP可以很方便的实现文件上传。 流程: 表单选择文件 -》检查文件大小及类型-》生成临时文件-》移动临时文件夹以及文件存储目录-》记录文件以...5.对文件上传后的管理
  • 1.选择文件后直接预览 2.点击上传按钮后使用ajax批量提交数据给服务器处理 3.同时上传文件和表单数据 一.配置文件 springMVC配置文件中添加 <!-- 上传文件 --> <bean id="multipartResolver" class=...
  • 文件上传漏洞原理和利用

    千次阅读 2019-08-06 19:03:45
    1.前段选择文件提交文件 2.浏览器形成POST MultiPart报文发送到服务器 3.服务器中间件接收到报文,解析交给后端代码进行处理 4.后端代码将上传的文件内容写入到临时文件中(PHP特有) 5.写入到文件中,文件...
  • 使用a-upload提交文件时,往往会携带其他需要手动输入的信息,a-upload组件本身虽然提供了上传前校验的方法beforeUpload,但该方法是在选择文件后才会进行,这是官方文档的描述: 上传文件之前的钩子,参数为上传的...
  • 选择了多个文件之后,我们应该怎么上传文件呢? 我这里上传文件在js这边采取的是for循环添加,添加...最后当i自加到选择文件的数量时,便是循环添加到了最后,输出一下添加的情况 //保存批量上传文件 function S...
  • 虽然现在很多都是使用大平台的对象存储存放应用中的文件,但有时小项目还是可以使用以前的方式上传到和程序一起的服务器上,强调一下这里是小众需求,大众可以使用阿里云的OSS,腾讯的COS,七牛的巴拉巴拉xxxxxx……...
  • 有两种 一种是通过iframe 还有就是用jquery.form.js 来实现所以就选择者 真的可以ajax提交form表单 然后进回调函数 还是比较可以的 小试了一下 呵呵呵 代码还没来得及优化 看上去可能有点凌乱
  • 上传下载之文件上传

    2019-03-01 16:24:54
    1、前台通过文件选择框选择文件提交后,通过action跳转到后端; 大致代码: //前台的代码先不去深究,毕竟水平精力有限;只指出关键的几个数据如:groupid,fileFileName,file,uploadType,clientkey等,其中涉及...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 792
精华内容 316
关键字:

文件上传选择文件后提交