前端文件上传

 	<!-- 上传按钮-->
	<div onclick="shangchuan($(this))"></div>
    <!-- 上传文件 -->
    <form action="" style="display: none" id="formFile">
        <input type="file" id="upload_btn">
    </form>


js
    //文件上传
    var click_btn //确认哪个按钮提交的
    function shangchuan(click_updata) {
        click_btn = click_updata
        $('#upload_btn').trigger("click");
    }
    var $input = $("#upload_btn");
     // 为input设定change事件
    $input.change(function () {
            // 如果value不为空,调用文件加载方法
            // console.log($(this).val());
            // var b = $(this).val().split('\\')
            // console.log(b[b.length-1]);
            if ($(this).val() != "") {
                fileLoad(this);
            }
     });

//创建上传文件
    function fileLoad(ele) {
        //创建一个formData对象
        var formData = new window.FormData();
        //获取传入元素的val
        var nameArr = $(ele).val().split('\\')
        var name = nameArr[nameArr.length - 1];
        //获取files
        var files = $(ele)[0].files[0];
        //获取文件大小
        var filesSize = $(ele)[0].files[0].size
        //限制上传文件大小
        if (filesSize > 2147483648) {
            alert('上传文件请勿上传超过2GB');
            return false
        }
        //文件类型
        var filesType = $(ele)[0].files[0].type
        //限制上传文件类型(文件类型总和见尾页)
        //判断文件类型只允许上传pdf和Mp4文件
        var allType = ['audio/mp4', 'video/mp4', 'application/pdf']
        if (allType.indexOf(filesType) == '-1') {
            alert('请上传正确格式的PDF文件或者MP4文件')
            return
        }
        //文件最后修改时间
        var lastModifiedDate = $(ele)[0].files[0].lastModifiedDate
        //文件名
        var filesName = $(ele)[0].files[0].name
        console.log($(ele)[0].files);
        click_btn.parent().prev().prev().children().val(filesName)
        click_btn.parent().prev().prev().children().attr('title', filesName)
        //⑦将name 和 files 添加到formData中,键值对形式
        formData.append("file", files);
        formData.append("name", name);
        formData.append("size", filesSize);
        formData.append("id", "007");
        formData.append("lastModifiedDate", lastModifiedDate);
        filesData = formData
    }

判断文件格式
*.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video

*.ac3 audio/ac3 AC3 Audio
*.asf allpication/vnd.ms-asf Advanced Streaming Format

*.au audio/basic AU Audio

*.css text/css Cascading Style Sheets

*.csv text/csv Comma Separated Values

*.doc application/msword MS Word Document

*.dot application/msword MS Word Template

*.dtd application/xml-dtd Document Type Definition

*.dwg image/vnd.dwg AutoCAD Drawing Database

*.dxf image/vnd.dxf AutoCAD Drawing Interchange Format

*.gif image/gif Graphic Interchange Format

*.htm text/html HyperText Markup Language

*.html text/html HyperText Markup Language

*.jp2 image/jp2 JPEG-2000

*.jpe image/jpeg JPEG

*.jpeg image/jpeg JPEG

*.jpg image/jpeg JPEG

*.js text/javascript, application/javascript JavaScript

*.json application/json JavaScript Object Notation

*.mp2 audio/mpeg, video/mpeg MPEG Audio/Video Stream, Layer II

*.mp3 audio/mpeg MPEG Audio Stream, Layer III

*.mp4 audio/mp4, video/mp4 MPEG-4 Audio/Video

*.mpeg video/mpeg MPEG Video Stream, Layer II

*.mpg video/mpeg MPEG Video Stream, Layer II

*.mpp application/vnd.ms-project MS Project Project

*.ogg application/ogg, audio/ogg Ogg Vorbis

*.pdf application/pdf Portable Document Format

*.png image/png Portable Network Graphics

*.pot application/vnd.ms-powerpoint MS PowerPoint Template

*.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow

*.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation

*.rtf application/rtf, text/rtf Rich Text Format

*.svf image/vnd.svf Simple Vector Format

*.tif image/tiff Tagged Image Format File

*.tiff image/tiff Tagged Image Format File

*.txt text/plain Plain Text

*.wdb application/vnd.ms-works MS Works Database

*.wps application/vnd.ms-works Works Text Document

*.xhtml application/xhtml+xml Extensible HyperText Markup Language

*.xlc application/vnd.ms-excel MS Excel Chart

*.xlm application/vnd.ms-excel MS Excel Macro

*.xls application/vnd.ms-excel MS Excel Spreadsheet

*.xlt application/vnd.ms-excel MS Excel Template

*.xlw application/vnd.ms-excel MS Excel Workspace

*.xml text/xml, application/xml Extensible Markup Language

*.zip aplication/zip Compressed Archive

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值