用jquery的ajax实现简单的文件上传功能，并且限制文件大小，先上代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>test</title>

    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

</head>

<body>

    <form id="uploadForm" enctype="multipart/form-data">

        <input id="file" type="file" name="file"/>

        <button id="upload" type="button">上传</button>

    </form>

    <script>

        var maxSize = 1000;//文件上传大小限制

        $('#upload').click(function(){

            var size = document.getElementById('file').files[0].size;

            var filesize = (size / 1024).toFixed(2);

            if(filesize < maxSize){

                $.ajax({

                    url: '/upload.php',

                    type: 'POST',

                    cache: false,

                    data: new FormData($('#uploadForm')[0]),

                    processData: false,

                    contentType: false

                }).done(function(res) {

                    alert('上传文件成功');

                }).fail(function(res) {

                    alert('上传文件失败');

                });

            }else{

                alert('上传文件不许大于' + maxSize + 'KB');

            }

        });

    </script>

</body>

</html>

上传是使用FormData对象来实现，利用files[0].size属性来获取文件的大小，进行上传限制。

jQuery的ajax实现文件上传大小限制的更多相关文章

  1. 使用jquery的ajax提交文件上传

    以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找. 提示:存在浏览器皆容问题,谨慎使用 ...

  2. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  3. Ajax 与文件上传

    一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...

  4. 基于 Django的Ajax实现 文件上传

    ---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...

  5. ajax与文件上传

    一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可 ...

  6. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  7. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  9. Django学习笔记之Ajax与文件上传

      Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

随机推荐

  1. PostgreSQL 日常数据库维护工作

    日常数据库维护工作定期备份,定期”清理“数据库,周期性的日志文件管理check_postgres可用于检测数据库的健康并报告异常情况 1. 日常清理 PostgreSQL数据库要求周期性的清理维护.对 ...

  2. expected declaration specifiers or '...' before string constant

    /work/platform_bus_dev_drv/led_dev.c:52: error: expected declaration specifiers or '...' before stri ...

  3. 侯捷STL学习(七)--深度探索vector&&array

    layout: post title: 侯捷STL学习(七) date: 2017-06-13 tag: 侯捷STL --- 第十六节 深度探索vector vector源码剖析 vector内存2倍 ...

  4. PHP函数(六)-匿名函数(闭包函数)

    匿名函数能够临时创建一个没有名称的函数,常用作回调函数参数的值 <?php $test = function($a){ echo "Hello,".$a; }; $test( ...

  5. 搭建node.js

    #node.js:概念介绍及安装 # python服务器.php ->aphche.java ->tomcat. iis # 它是一个可以运行JAVASCRIPTR 的运行环境 # 它可以 ...

  6. 深入理解CPU和异构计算芯片GPU/FPGA/ASIC （下篇）

    3.2.1 CPU计算能力分析 这里CPU计算能力用Intel的Haswell架构进行分析,Haswell架构上计算单元有2个FMA(fused multiply-add),每个FMA可以对256bi ...

  7. Linux系统下Oracle执行SQL脚本后中文出现乱码解决方法

    先确认Oracle的字符集,sqlplus登录Oracle后执行语句:   [sql] select userenv('language') from dual; 返回值例如:AMERICAN_AME ...

  8. 【知识碎片】Net项目经验积累

    后台传JSON到js报错 MVC控制器传json到前端JS"变为" 导致JS报错 重点是一定要在@ViewBag.typeJson两边加双引号,并且后台用 编码前台解码 ViewB ...

  9. [Python Study Notes]物体运动检测

    基于opencv的cv2模块实现 ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  10. 浅析大数据的技术生态圈(Hadoop，hive，spark)

    大数据本身是个很宽泛的概念,Hadoop生态圈(或者泛生态圈)基本上都是为了处理超过单机尺度的数据处理而诞生的.你可以把它比作一个厨房所以需要的各种工具.锅碗瓢盆,各有各的用处,互相之间又有重合.你可 ...