用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. UE4流关卡

    转自:http://blog.ch-wind.com/ue4-level-streaming/ 流关卡可以使得关卡内容只在玩家“需要”的时候才加载,在很多游戏中都有使用这个技术. 当前UE4版本4.1 ...

  2. d-s证据理论

    证据理论是Dempster于1967年首先提出,由他的学生Shafer于1976年进一步发展起来的一种不精确推理理论,也称为Dempster/Shafer 证据理论(D-S证据理论),属于人工智能范畴 ...

  3. web 应用 及 补充

    Highcharts 绘图配置 的函数及参数 web页面文本框修饰器 --- KindEditor web页面 之 超人性的点赞与狂踩 web页面 之 图片上传 web页面 之 评论盖楼 jQuery ...

  4. java 多线程系列基础篇（六）之线程让步

    1. yield()介绍 yield()的作用是让步.它能让当前线程由“运行状态”进入到“就绪状态”,从而让其它具有相同优先级的等待线程获取执行权:但是,并不能保证在当前线程调用yield()之后,其 ...

  5. 问题：PLS-00204: 函数或伪列 'EXISTS' 只能在 SQL 语句中使用；结果：PL/SQL中不能用exists函数？

    怎么写了一个语句带出这样的结果. 语句: if exists (select * from sysdatabases where name='omni') then 结果: ERROR 位于第 4 行 ...

  6. nginx 限制solr

    server { listen 80; server_name bai.com  www.bai.com; location /solr/ { allow 192.168.0.0/24; allow ...

  7. vue开发后台管理系统小结

    最近工作需要用vue开发了后台管理系统,由于是第一次开发后台管理系统,中间也遇到了一些坑,想在这里做个总结,也算是对于自己工作的一个肯定.我们金融性质的网站所以就不将代码贴出来哈 一.项目概述 首先工 ...

  8. 学习Javascript的书籍（转）

    学习Javascript的书籍   作者: 阮一峰 日期: 2008年1月 9日 昨天,ppip同学留言: 你的js主要是用什么材料学的?推荐用哪本教程呢? 我想了一下,发现自己还真的读过不少书.我在 ...

  9. ROS Learning-029 （提高篇-007 A Mobile Base-05） 控制移动平台 --- （Python编程）控制虚拟机器人的移动（精确的制定目标位置）

    ROS 提高篇 之 A Mobile Base-05 - 控制移动平台 - (Python编程)控制虚拟机器人的移动(精确的制定目标位置) 使用 odometry 消息类型 重写 out_and_ba ...

  10. General框架如何实现多数据库支持

    关于用C#实现多数据库支持的方式,大家都会多少了解,本文从General框架的开发思路角度详细介绍General框架实现多数据库支持的方式,使更多的人了解General框架的底层实现并得到所需的相关知 ...