原生js实现ajax的文件异步提交功能图片预览功能.实例

Posted 2020-08-23 YangJavaer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现ajax的文件异步提交功能图片预览功能.实例相关的知识，希望对你有一定的参考价值。

<%--
  Created by IntelliJ IDEA.
  User: yh
  Date: 2016/12/14
  Time: 17:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/include/taglib.jsp" %>
<html>
<head>
    <%@ include file="/WEB-INF/include/head.jsp" %>
    <title>Title</title>
    <style>
        #uname {
            height: auto;
        }
        #pwd {
            height: auto;
        }
    </style>

    <script>

//        html5实现图片预览功能
        $(function(){
            $("#file").change(function(e){
                var file = e.target.files[0]||e.dataTransfer.files[0];
                if(file){
                    var reader = new FileReader();
                    reader.onload=function(){
                        $("img").attr("src", this.result);

                    }

                    reader.readAsDataURL(file);
                }
            });
        })

        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 form = new FormData();
            form.append("uname", uname); // 可以增加表单数据
            form.append("id", id);
            form.append("pwd", pwd);
            if(file){
                form.append("file", file);
            }


            var xhr = null; //得到xhr对象
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xhr.open("post", "${ctx}/user/save", true);//设置提交方式，url，异步提交
            xhr.onload = function ()
            {
                var data = xhr.responseText;	//得到返回值
               // alert(data);
                var errorMsg = JSON.parse(data);
                alert(errorMsg.msg);
                if(errorMsg.code == "0"){
                    top.Dialog.close(); //成功，关闭弹窗
                }

            }
            xhr.send(form);

        }
    </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">

                <input type="hidden" value="${user.id}" id="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="${user.uname}" id="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="${user.pwd}" id="pwd"
                               placeholder="请输入密码">
                    </div>
                </div>

                <div class="control-group">
                    <label  class="col-md-3 control-label span3"></label>
                    <div class="col-md-9">
                        <img src="${ctxStatic}/uploadImage/${user.img}" width="80px" height="20px">
                    </div>
                </div>

                <div class="control-group">
                    <label for="file" class="col-md-3 control-label span3">图片上传:</label>
                    <div class="col-md-9">
                        <input type="file" class="form-control span3" id="file">
                        <!--<input type="text" id="imgPath">-->
                    </div>
                </div>

                <div class="control-group">
                    <label class="col-md-2 control-label span2"></label>
                    <div class="col-md-10">
                        <button type="button" class="btn btn-small btn-primary" onclick="saveUser()">提交</button>
                        <a type="button" class="btn btn-small btn-danger" onclick="javascript:top.Dialog.close();">取消</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

以上是关于原生js实现ajax的文件异步提交功能图片预览功能.实例的主要内容，如果未能解决你的问题，请参考以下文章

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

ajaxFileUpload异步上传图片，服务器文件叫多，如何删除啊~~

浅谈js本地图片预览

原生 js 实现截图粘贴预览图片功能

基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

简单的实现图片预览, 通过原生ajax以及 jQuery两种方法实现图片预览,有更好的办法可以留言喔................