文档章节

ajax上传图片,html5

J
 JavaMVC
发布于 2016/11/14 16:03
字数 207
阅读 67
收藏 1

该上传图片不用其他库,只用借助jquery.js即可,但页面需要html5标准

<form id="fileForm" enctype="multipart/form-data">
        <input type="file" name="showImg" id="pic">
    </form>
    
    <input type="button" value="file" onclick="uploadFile()">
    <input type="text" id="per" value="">
    <input type="text" id="name" value="">


function uploadFile()
{
    var formData = new FormData($("#fileForm")[0]);
    formData.append("file" , pic);
    $.ajax({
        type: "POST",
        url: "/company/uploadImg.do",
        data: formData,//这里上传的数据使用了formData 对象
        processData : false,
        //必须false才会自动加上正确的Content-Type 
        contentType : false , 
        //这里我们先拿到jQuery产生的 XMLHttpRequest对象,为其增加 progress 事件绑定,然后再返回交给ajax使用
        cache: false,
        success: function (obj)
        {
            $("#name").val(obj);
        },
        xhr: function()
        {
            var xhr = $.ajaxSettings.xhr();
            if(onprogress && xhr.upload)
            {
                xhr.upload.addEventListener("progress" , onprogress, false);
                return xhr;
            }
        } 
    });
}

function onprogress(evt)
{
    var loaded = evt.loaded;     //已经上传大小情况 
    var tot = evt.total;      //附件总大小 
    var per = Math.floor(100*loaded/tot);  //已经上传的百分比 
    $("#per").val( per +"%" );
}

© 著作权归作者所有

J
粉丝 0
博文 6
码字总数 887
作品 0
南京
程序员
私信 提问
如何使用HTML5实现拍照上传应用

在HTML5规范的支持下,WebApp在手机上拍照已经成为可能。在下面,我将讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器。 1、 视频流 HTML5 The Media Capture API提供了对摄像头...

彭博
2012/04/12
1K
0
HTML5 FormData+Ajax上传文件表单

文件表单的数据类事multipart/form-data,因此,formData需要特殊处理. 文件上传 参考文章: HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传 [HTML5] Blob对象 通过Ajax方式上传文件,使用...

IamOkay
2017/10/31
379
0
(转载学习)文件上传的渐进式增强

本文为转载学习 原文作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/08/fileupload.html HTML5提供了一系列新的浏览器API,使得文件上传有可能出现革命性变化。英国程序员Rem...

heroShane
2014/01/24
48
0
为开发者和设计者准备的 HTML5 文件上传教程

本文主要是收集了一些使用 HTML5 进行文件上传的教程: 纯 HTML5 文件上传 带进度条的 HTML5 文件上传 HTML5 拖放式文件上传的 API 教程 全新的 HTML5 多文件上传 使用 jQuery 的 HTML5 文件...

红薯
2012/01/18
2.2K
4
HTML5在线摄像头应用

最近在搞一个考试系统,系统要求要有随机拍照的功能,并且摄像头能够收到js的控制。在线摄像头嘛,就那两种实现的方式:cab或者flash。 暂且不论本人从没学过的flash(事实上我已经做了一个f...

长平狐
2012/06/08
426
0

没有更多内容

加载失败,请刷新页面

加载更多

Java描述设计模式(11):观察者模式

本文源码:GitHub·点这里 || GitEE·点这里 一、观察者模式 1、概念描述 观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式。观察者模式定义了一种一对多的依赖关系,让多...

知了一笑
34分钟前
5
0
Qt 之 模态、非模态、半模态窗口的介绍及 实现QDialog的exec()方法

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/GoForwardToStep/article/details/53667566 一、简述 先简...

shzwork
37分钟前
2
0
OSChina 周一乱弹 —— 产品经理和程序员是夫妻?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《Ocean Eyes》- Billie Eilish 《Ocean Eyes》- Billie Eilish 手机党少年们想听歌,请使劲儿戳(这里) @夏目Jane :风太大。...

小小编辑
今天
309
7
使用CSS自定义属性构建骨架屏

写在前面 几天前看到薄荷前端团队分享的《前端骨架屏方案小结》,突然回想起一年前看到的max bock写的《Building Skeleton Screens with CSS Custom Properties》,翻译整理写下出此文,分享...

前端老手
昨天
17
0
Docker常用命令小记

除了基本的<font color="blue">docker pull</font>、<font color="blue">docker image</font>、<font color="blue">docker ps</font>,还有一些命令及参数也很重要,在此记录下来避免遗忘。 ......

程序员欣宸
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部