用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. FreeType 管理字形

    转自:http://blog.csdn.net/hgl868/article/details/7254687 1.字形度量 顾名思义,字形度量是对应每一个字形的特定距离,以此描述如何对文本排版.    ...

  2. weex和vue开发环境配置详解(配置系统变量等等)

    本文详细讲解如何搭建weex和vue开发环境 安装java 现在java安装包,网上的安装包都是国外的,很难下载下来 就用这个链接下载,亲测无毒,http://www.wmzhe.com/soft-3 ...

  3. 2016.7.27 VS搜索正则表达式，在UltraEdit中可选用Perl正则引擎，按C#语法搜索

    表达式 语法 说明 任一字符 . 匹配除换行符外的任何一个字符. 最多 0 项或更多 * 匹配前面表达式的 0 个或更多搜索项. 最多一项或更多 + 匹配前面表达式的至少一个搜索项. 最少 0 项或更 ...

  4. 为什么in_array(0, ['a', 'b', 'c'])返回true

    为什么in_array(0, ['a', 'b', 'c'])返回true 目录 1 类型转换 2 严格比较 3 false和null 4 数组中有true 在PHP中,数据会自动转换类型后进行比较. ...

  5. 破解Mac版MyEclipse-2017-ci3 2017、11、21亲测有效

    一.前提 要有安装好的jdk,没有的Mac用户看这篇博客:给Mac安装最新版本的jdk(戳此)  Windows用户先去官网(戳此)下载jdk,然后百度”jdk配置环境变量”(戳此),很简单的,加油你 ...

  6. oracle——pl/sql 查询中文乱码

    1.查看服务器端编码select userenv('language') from dual;我实际查到的结果为:AMERICAN_AMERICA.AL32UTF82.执行语句 select * fr ...

  7. 10-23C#基础--结构体

    结构体: 1.定义:封装小型相关变量组,里面可以放一系列的变量: 就是一个变量组,将一组变量放在一起,结构体一般定义在Main函数上面,位于Class下面,作为一个类:一般情况Struct定义在Mai ...

  8. Markdown编辑器及图床推荐

    Typora和自动图床工具 Typora 地址 ,极致简洁,界面很漂亮,最重要的是所见即所得 百度云搬运 密码:xi01 自动图床工具 需要七牛云做图床,感谢作者,详见博客 使用方法,只需两步即可完成 ...

  9. .each循环的两种使用方法

  10. sql编写注意

    DROP TABLE IF EXISTS `imooc_pro`; CREATE TABLE `imooc_pro`( `id` int unsigned auto_increment key, `p ...