input标签type=file的文件上传

今天药忘吃喽~ 2022-11-11 13:19 447阅读 0赞

## 一，通过表单提交的方式 ##

该提交方式只是提交普通表单；对于file组所选中的文件内容是不上传的，因此需要设置：enctype属性

enctype="multipart/form-data"

如果想上传多文件，可添加multiple

<input type="file" name="img" multiple="multiple" />

## 二，通过Ajax异步提交的方式 ##

**获取文件内容:**

//javascript
    var file = document.getElementById('fileToUpload').files[0];
    
    //jQuery：
    var file = $("#img_input").prop("files")[0];

**上传：**  
XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件。比起普通的Ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件。

// 创建
    var form_data = new FormData();
    // 获取文件
    var file_data = $("#img_input").prop("files")[0];
    // 把所以表单信息
    form_data.append("id", "001");
    form_data.append("name", "test");
    form_data.append("img", file_data);
    $.ajax({
        
        type: "POST",
        url: "....",
        dataType : "json",
        processData: false,  // 注意：让jQuery不要处理数据
        contentType: false,  // 注意：让jQuery不要设置contentType
        data: form_data
    }).success(function(msg) {
        
        console.log(msg);
    }).fail(function(msg) {
        
        console.log(msg);
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，447人围观）

还没有评论，来说两句吧...

相关阅读

相关 input标签type=file的文件上传

一，通过表单提交的方式该提交方式只是提交普通表单；对于file组所选中的文件内容是不上传的，因此需要设置：enctype属性 enctype="multipa

今天药忘吃喽~/ 2022年11月11日 13:19/ 0 赞/ 448 阅读

相关【HTML】上传文件input样式美化

起因，最近因为一些原因，在写一个前端小页面，但是上传文件的样式怎么调整都不是很满意。遂转变思维想到了如下方法。传统写法 <form id="upform" e

Love The Way You Lie/ 2022年05月27日 12:57/ 0 赞/ 1060 阅读

相关美化input文件上传按钮

效果演示： ![70][] <!-- / @Author: Ding Jianlong @Date: 2018-09-21 13:25

朴灿烈づ我的快乐病毒、/ 2022年05月13日 13:36/ 0 赞/ 273 阅读

相关 input 文件上传 --- 只上传指定文件

> 最近项目要做一个文件上传功能, 只上传 Excel 表统计数据,这里只需在form表单中 input 标签中,添加一个属性即可 <%--存放上传文件的表单域，名

你的名字/ 2022年05月11日 00:16/ 0 赞/ 505 阅读

相关 input = file 实现上传文件

使用input = file实现文件上传功能，如果点击提交按钮，提交表单并上传选中的文件： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

待我称王封你为后i/ 2021年12月18日 15:53/ 0 赞/ 361 阅读

相关 vue中 input 上传文件

<template> <div class="app-container"> <el-form id="box2" :label-

矫情吗；*/ 2021年11月11日 10:50/ 0 赞/ 885 阅读

相关 js - 使用input标签实现上传文件夹和上传文件

最近做了一个项目，需要实现上传文件夹和批量上传文件的功能，发现input标签是可以实现这两个功能的，但是上传文件夹功能还不能兼容全部的浏览器，目前只有谷歌浏览器和Micros

「爱情、让人受尽委屈。」/ 2021年09月08日 22:18/ 0 赞/ 995 阅读

相关 input上传文件格式限制

accept值 > “application/vnd.ms-excel ,application/vnd.openxmlformats-officedocument.sp

本是古典何须时尚/ 2021年09月07日 06:20/ 0 赞/ 641 阅读

相关 js上传文件；input上传文件；

html原生上传文件方式1： ![在这里插入图片描述][20210324233047985.gif] <!DOCTYPE html> <html>

小灰灰/ 2021年09月07日 06:20/ 0 赞/ 556 阅读

相关 js input文件上传

(1)设置类型type='file' 属性: accept='格式1,格式2' 前台筛选文件格式允许所有图片格式:"image/

柔光的暖阳◎/ 2021年07月25日 00:15/ 0 赞/ 516 阅读