一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    表单方式文件上传和获取文件属性

    技术 298 2019-09-25 16:37

    1.使用form上传文件:

    <form action='uploadFile.php' enctype="multipart/form-data" type='post'>
     <input type='file'>
     <input type='hidden' name='userid'>
     <input type='hidden' name='signature'>
     <button>提交</button>
    </form>
    

    注:form表单里发送除文件外的数据,一般是新建一个type=hidden的input,value=‘需要传的数据’,每发送一个数据就需要一个input(相当于参数)

    2.获取文件详细属性:

    $("#fileContent").change(function(){
    // 获取到file对象
     var file = this.files[0]
    // 声明FileReader实例化对象
     var fr = new FileReader()
    // 使用实例化对象的readAsDataURL API放入file对象
     fr.readAsDataURL(file)
    // 最后通过实例化对象的onload事件 获取文件详细属性
     fr.onload = function (event) {
        var data= event.target.result
    // 如果是图片则是base64 不然就是blob对象
        console.log(data)
    }        
    })
    

    3.使用ajax上传form表单文件:

    $("input[type='button']").on('click', upfile);
    function upfile() {
    var formData = new FormData();
    formData.append("接收字段1", document.getElementById('file1').files[0]);
    formData.append("接收字段2", document.getElementById('file2').files[0]);
    $.ajax({
    url: '接口地址url',
    type: 'POST',
    data: formData,
    // 上传formdata封装的数据包
    dataType: 'JSON',
    cache: false,
    // 不缓存
    processData: false,
    // jQuery不要去处理发送的数据
    contentType: false,
    // jQuery不要去设置Content-Type请求头
    success: function(data) {
    // 成功回调
    console.log(data);
    }
    })
    }
    


    如果没有使用JQ 而是原生的input file上传文件只需要:

    html:

     <input type="file" onchange="fileChange(event)" />
    

    JS:

        function fileChange(e) {
          let file = e.target.files[0];
          console.log(file.lastModified);
          console.log(file.lastModifiedDate);
          console.log(file.name);
          console.log(file.size);
          console.log(file.type);
          console.log(file.webkitRelativePath);
        }
    

    文章评论

    评论列表(0