zoukankan      html  css  js  c++  java
  • JS_单个或多个文件上传_不支持单独修改

    A-From表单直接填写提交地址,不过干预:

    1. 单文件上传

    最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/form-data",form表单中有一个input[type="file"]项

    <form name="form1" method="post" action="/abc.ashx" enctype="multipart/form-data">
    <input type="text" name="user" id="user" placeholder="请输入昵称">
    <input type="file" name="userImage" id="userImage">
    <input type="submit" name="sub" value="提交">
    </form>

    2. 多文件上传

      1)类似单文件上传,简单的多文件上传其实就是多几个input[type="file"]项

    <form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
    <input type="text" name="user" id="user" placeholder="请输入昵称">
    <input type="file" name="userImage1" id="userImage1">
    <input type="file" name="userImage2" id="userImage2">
    <input type="file" name="userImage3" id="userImage3">
    <input type="submit" name="sub" value="提交">
    </form>

      2) HTML5为表单文件项新增了一个multiple属性,可以设置实现选择多个文件,如

    <form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
    <input type="text" name="user" id="user" placeholder="请输入昵称">
    <input type="file" name="userImage" id="userImage" multiple>
    <input type="submit" name="sub" value="提交">
    </form>

    B-JS处理提交:

      1-ajax:

    $.ajax({    
         url : "http://localhost:8080/STS/rest/user",    
         type : "POST",    
         data : $( '#postForm').serialize(),    
         success : function(data) {    
              $( '#serverResponse').html(data);    
         },    
         error : function(data) {    
              $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);    
         }    
    });   

      2-ajax通过FormData:

    $.ajax({
        url: '/upload',
        type: 'POST',
        cache: false,
        data: new FormData($('#uploadForm')[0]),
        processData: false,
        contentType: false
    }).done(function(res) {
    }).fail(function(res) {});

      3-jquery.form.js:

     需引用jquery.form.js文件

    window.OrderComplaintCache.$formMessage.attr("action", "/ajax/usercenterHandler.js?action=complaintorder");
    window.OrderComplaintCache.$formMessage.ajaxSubmit(function (json) {
                    var data = null;
                    try {
                        data = JSON.parse(json);
                    } catch (e) {
                        data = new Function("return " + json + "")();
                    }
                    var code = data.code;
                    //$(":text,textarea").val("");
                    if (code > 0) {
                        alert(window.UserCenterMsg.orderComplaintSentSuccessMessage);
                    } else {
                        alert(data.message);
                        return;
                    }
                    location.href = location.href;
                });

    参考资料:

    http://www.jb51.net/article/93935.htm

    https://www.cnblogs.com/zhuxiaojie/p/4783939.html

    http://blog.csdn.net/inuyasha1121/article/details/51915742

    http://blog.csdn.net/legendaryhe/article/details/74140171

    http://blog.csdn.net/LCRxxoo/article/details/70891533

  • 相关阅读:
    elementUI中的loading
    element消息提示封装
    scroll滚动条掩藏
    elment-UI中表头和内容错位
    SpringBoot集成AD域实现统一用户认证
    SpringBoot集成JWT验证方式
    OAuth2.0协议专区-深入介绍
    Alibaba-技术专区-开源项目之Druid数据库监控平台
    SpringBoot-技术专区-Mybatisplus多数据源
    MySQL-技术专区-性能优化速记
  • 原文地址:https://www.cnblogs.com/lxhbky/p/7867578.html
Copyright © 2011-2022 走看看