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

采用html5使得选择图片改变时，预览框中图片随之改变。input文件选择框美化。原生js完成文件异步提交

效果图：

代码如下，可直接复制并保存为html文件打开查看效果

<html>
<head><title>Title</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><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);}});})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"){alert("success"); //成功
                }}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="" 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="" 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="" 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" 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"><button type="button" class="btn btn-small btn-primary" onclick="saveUser()">提交</button><a type="button" class="btn btn-small btn-danger">取消</a></div></div></form></div></div>
</div></body>
</html>

转载于:https://www.cnblogs.com/LeoBoy/p/6186352.html

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

用openoffice+jodconverter+webuploader+pdf.js实现文件上传、在线预览功能
一.背景最近公司一个项目要实现一个文件上传以及多文档在线预览的功能,之前一直做无线工具开发的,没有涉及到这些东西.另外项目组缺java开发人员,而且自己也只是一个半吊子前端加小半吊子java开发人员 ...
js实现图片预览功能
最近在项目上遇到图片无法预览的问题,最后用change事件实现,不太完美但可以先使用 js代码 1 $(function () { 2 $("#Picture").change(f ...
php上传头像的代码,php实现文件上传及头像预览功能
php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php程序将文件保存在体 ...
原生JS实现Ajax下载文件
/*** url 下载url* filename 下载文件名称*/ function download(url, filename) {var xhr = new XMLHttpRequest();x ...
图片预览（原生js实现）
功能描述很多网站都是使用浏览器自带图片浏览功能,但看起来很low,想手动实现图片预览功能,点击图片弹出大图预览框在屏幕中间显示,根据图片宽高自适应屏幕大小效果图具体代码实现页面preview. ...
axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目基于Vue.js+axios ...
原生图片预览实现及由此引出的图片自适应宽高问题探索
看到手机相册,突发奇想:能不能用实现一个原生的页面"相册"?或者说,传统网页中怎么实现图片预览功能? 如果在原生网页中使用插件,那必不可少的要引入一堆东西(并不是鄙视插件,只是为了 ...
Vue+wangeditor富文本+element——--上传+下载文件+图片预览
一:上传文件 HTML <el-upload class="upload-demo" action="haircut/upload" :on-previe ...
JS实现图片预览与等比缩放
案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

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

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

最新文章

热门文章