文档章节

原生JS图片异步上传

a
 acclea
发布于 2017/07/25 10:48
字数 255
阅读 10
收藏 0
<div class="cont">
    <ul class="clearfix">
        <form  enctype="multipart/form-data">
            <li>
                <label>选择图片:</label>
                <input class="file" type="file" id="mBgImg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                <span>640*320</span>
            </li>
        </form>
    </ul>
    <div class="btn_input">
        <input type="button" class="btn cancel" value="取消">
        <input type="button" class="btn confirm" id="mBgBtn" value="确定">
    </div>
</div>

1、将需要上传的图片用<from>处理,代码如上

2、js代码,如下

$("#mBgBtn").click(function () {

    //判断是否有选择上传文件
    var mBgImg = $("#mBgImg").val();
    if (mBgImg == "") { alert("请选择上传图片!"); return; } 
    //判断上传文件的后缀名  
    var strExtension = mBgImg.substr(mBgImg.lastIndexOf('.') + 1); 
    if ( strExtension != 'gif' && strExtension != 'jpeg' && strExtension != 'jpg' && strExtension != 'png' && strExtension != 'svg' ) {alert("请选择合法图片上传!"); return; } 
    //原生JS上传开始  
    var xhr; 
    function createXMLHttpRequest(){ 
        if(window.ActiveXObject){ 
            xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
        }else if(window.XMLHttpRequest){ 
            xhr = new XMLHttpRequest(); 
        } 
    } 

    var fileObj = document.getElementById("mBgImg").files[0]; 
    var FileController = 'index.php?m=admin_area_mBgImgChg'; 
    var form = new FormData(); form.append("mBgImg", fileObj); 
    createXMLHttpRequest(); 
    xhr.onreadystatechange = handleStateChange; 
    xhr.open("post", FileController, true); 
    xhr.send(form); 

    function handleStateChange(){ 
        if(xhr.readyState == 4){ 
            if (xhr.status == 200 || xhr.status == 0){ 
                var result = xhr.responseText; 
                var ref = result.split('|'); 
                if(ref[0] == -2){ 
                    alert(ref[1]); 
                    $("#mBgBtn").parents(".popup").hide(); 
                    return; 
                }else { 
                    alert(ref[1]); 
                    return; 
                } 
            } 
        } 
    } //原生JS上传结束
});

© 著作权归作者所有

a
粉丝 3
博文 104
码字总数 35537
作品 0
静安
程序员
私信 提问
Python3基础之学习笔记(十五)-Ajax-文件上传-图片验证码

1. Django 1.1 Ajax 1.1.1 Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,...

GoldenKitten
01/17
0
0
原生JS上传图片(FormData,可预览,一次多图)

前言: 适合人群:刚起步的前端新人。(前后端未分离的项目)全栈后端老大哥的前端需求(点名批评下jsp)。 解决问题: 知识点: 1.普通js上传一张图片 HTML代码: 需要一个input:file图片上传控件 ...

TJ在掘金
06/13
0
0
JS异步上传压缩图片,并立即显示图片。

感谢 think2011 这位兄台的JS库:https://github.com/think2011/LocalResizeIMG 先看调用页面: <!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=de......

zerodeng
2015/11/05
13.8K
0
庖丁解牛!带你深入了解React Native下一代架构重构

概述 Facebook在2018年6月官方宣布了大规模重构React Native的计划及重构路线图。目的是为了让React Native更加轻量化、更适应混合开发,接近甚至达到原生的体验。(也有可能是React Native团...

ARES
07/16
0
0
HTML5 FormData+Ajax上传文件表单

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

IamOkay
2017/10/31
369
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
6
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
17
0
浅谈java过滤器Filter

一、简介 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码、做一些业务逻辑判断如是否有权限访问页面等。其工作原理是,只要你在web.xml...

青衣霓裳
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部