js 实现异步上传图片+预览

两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。

<!DOCTYPE html>

<html>

<head>

    <title>Title</title>

    <link href="~/Content/Css/bootstrap.3.3.4.min.css" rel="stylesheet" />

    <script src="~/Scripts/Jquery-2.1.4.min.js"></script>

    <script src="~/Scripts/bootstrap.3.3.4.min.js"></script>

</head>

<body style="overflow: scroll; overflow-y: hidden; overflow-x: hidden">

    <div style="height: 20px"></div>

    <div class="container">

        <div class="row">

            <div class="col-md-6 col-md-offset-3">

                <form class="form-horizontal" enctype="multipart/form-data" role="form" id="testform">

                    <input type="hidden" value="1" id="id" name="id" />

                    <div class="control-group">

                        <label for="uname" class="col-md-3 control-label span3">姓 名:</label>

                        <div class="col-md-9">

                            <input type="text" class="form-control span3" value="" id="uname" name="uname"

                                placeholder="请输入姓名">

                        </div>

                    </div>

                    <div class="control-group">

                        <label for="pwd" class="col-md-3 control-label span3">密码:</label>

                        <div class="col-md-9">

                            <input type="password" class="form-control span3" value="" id="pwd" name="pwd"

                                placeholder="请输入密码">

                        </div>

                    </div>

                    <div class="control-group">

                        <label class="col-md-3 control-label span3"></label>

                        <div class="col-md-9">

                            <img src="" width="100px" height="100px">

                        </div>

                    </div>

                    <div class="control-group">

                        <label for="requirement" class="col-md-3 control-label span3">图片上传</label>

                        <div class="col-md-9">

                            <div class="input-group">

                                <input id="photoCover" class="form-control" readonly type="text">

                                <label class="input-group-btn">

                                    <input id="file" type="file" name="file" style="left: -9999px; position: absolute;">

                                    <span class="btn btn-default">Browse</span>

                                </label>

                            </div>

                        </div>

                    </div>

                    <div class="control-group">

                        <label class="col-md-2 control-label span2"></label>

                        <div class="col-md-10">

                            <a class="btn btn-small btn-primary" onclick="saveUser()">方式一</a>

                            <a class="btn btn-small btn-danger" onclick="saveUser2()">方式二</a>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

    <script>

        //html5实现图片预览功能

        $(function () {

            $("#file").change(function (e) {

                var file = e.target.files[0] || e.dataTransfer.files[0];

                $('#photoCover').val(document.getElementById("file").files[0].name);

                if (file) {

                    var reader = new FileReader();

                    reader.onload = function () {

                        $("img").attr("src", this.result);

                    }

                    reader.readAsDataURL(file);

                }

            });

        })

        //方式一 Jquery实现

        function saveUser2() {

            var id = $("#id").val().trim();

            var uname = $("#uname").val().trim();

            var pwd = $("#pwd").val().trim();

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

            var formData = new FormData();

            formData.append('id', id);

            formData.append('uname', uname);

            formData.append('pwd', pwd);

            formData.append('file', file);

            $.ajax({

                url: "/home/about",

                type: "post",

                data: formData,

                contentType: false,

                processData: false,

                mimeType: "multipart/form-data",

                success: function (data) {

                    console.log(data);

                },

                error: function (data) {

                    console.log(data);

                }

            });

        }

        //方式二  原生ajax实现

        function saveUser() {

            var id = $("#id").val().trim();

            var uname = $("#uname").val().trim();

            var pwd = $("#pwd").val().trim();

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

            //原生ajax实现文件上传

            var formData = new FormData();

            formData.append("uname", uname); // 可以增加表单数据

            formData.append("id", id);

            formData.append("pwd", pwd);

            if (file) {

                formData.append("file", file);

            }

            //得到xhr对象

            var xhr = null;

            if (XMLHttpRequest) {

                xhr = new XMLHttpRequest();

            } else {

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open("post", "/home/about", true);//设置提交方式，url，异步提交

            xhr.onload = function () {

                var data = xhr.responseText;    //得到返回值

                alert(data);

            }

            xhr.send(formData);

        }

    </script>

</body>

</html>

注意：

　　1、用JQuery方式需要加两个参数 contentType: false 和processData: false，这两个参数是为了设置ajax对file文件对象进行序列化

　　2、两种方式在组织参数时都需要使用var formData = new FormData()

js 实现异步上传图片+预览的更多相关文章

JS 上传图片 + 预览功能（一）
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下:  ...
通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
去除ckeditor上传图片预览中的英文字母
去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...
JS实现的图片预览功能
之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

随机推荐

什么是DevOps
历史回顾为了能够更好的理解什么是DevOps,我们很有必要对当时还只有程序员(此前还没有派生出开发者,前台工程师,后台工程师之类)这个称号存在的历史进行一下回顾. 如编程之道中所言: 老一辈的程序员 ...
修改tomcatlog输出等级
/usr/local/tomcat2/webapps/digital/WEB-INF/classes/log4j.properties log4j.properties配置如下(配置是转载): log ...
Linq、Lambda表达式详细总结(转)
(一)输入参数在Lambda表达式中,输入参数是Lambda运算符的左边部分.它包含参数的数量可以为0.1或者多个.只有当输入参数为1时,Lambda表达式左边的一对小括弧才可以省略.输入参数的数 ...
【记录】VMware解决网络找不到服务器的问题
本想在虚拟机上的Linux上练习安装Mysql8.0版本的,网络连不上的问题卡了N天简直 1. 点击虚拟机右键设置,虚拟机默认设置为NAT模式,这里无需修改. 2. 点击编辑,虚拟网络设置,勾选主机连 ...
MacOS修改用户名后变为普通用户，无法创建管理员账号
摘要:有的时候用户修改原电脑用户名,会把该用户降为普通用户,点击下方的锁会弹出下方图示,导致无法修改任何设置解决方案: 重启电脑Restart按Command+S进入终端terminal输入以下命令 ...
php 加密解密算法用于数据传输
/** * 加密方法 * @param string $data 要加密的字符串 * @param string $key 加密密钥 * @param int $expire 过期时间 (单位:秒) ...
深入理解泛型之JAVA泛型的继承和实现、泛型擦除
很多的基础类设计会采用泛型模式,有些应用在使用的时候处于隔离考虑,会进行继承,此时子类如何继承泛型类就很讲究了,有些情况下需要类型擦除,有些情况下不需要类型擦除,但是大多数情况下,我们需要的是保留父类 ...
JavaWeb三大组件
一.JavaWeb三大组件 Servlet,Listener,Filter.它们在JavaWeb开发中分别提供不同的功能. JavaWeb三大组件都必须在Web.xml中配置二.三大组件 1.Ser ...
Xml & Tomcat
文档声明: 简单声明, version : 解析这个xml的时候,使用什么版本的解析器解析 <?xml version="1.0" ?> encoding : 解析xm ...
Android中碎片的添加问题
碎片在Android中的应用是十分广泛的,它就像是嵌在活动中的另一个活动就像是一个容器包含了另一个容器,那么到底该怎么添加碎片呢?主要有两种方法,一种是在该碎片所在的xml文档中使用Android:n ...

js 实现异步上传图片+预览

js 实现异步上传图片+预览的更多相关文章

随机推荐

热门专题