JavaScript实现无刷新上传预览图片功能
无刷新上传功能如何实现？手写无刷新上传要用到两个东西，FormData和FileReader。
FileReader 用于图片浏览。
FormData 用于ajax请求。
html代码
先创建表单跟图片的容器
<form enctype="multipart/form-data" id="oForm">
<input type="file" name="file" id="file" onchange="readAsDataURL()" />
<input type="button" value="提交" onclick="doUpload()" />
</form>
<div>
<img alt="" id="img"/>
</div>
javascript代码
FormData:
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据， 因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输 的数据格式和表单通过submit() 方法传输的数据格式相同。
在这里FormData对象是用来获取form表单内的所有input数据，然后使用ajax请求发送数据到指定url，就不会出现表单提交时跳转的情况。
function doUpload() {
var formData = new FormData($( "#oForm" )[0]);
console.log(formData);
$.ajax({
url: 'pp',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
console.log(returndata);
},
error: function (returndata) {
console.log(returndata);
}
});
}
FileReader:
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容， 使用 File 或 Blob 对象指定要读取的文件或数据。
在这里FileReader对象是用来获取file上来的图片并把图片转换成Data URL形式显示在事先创建的 容器中。
function readAsDataURL(){
//检验是否为图像文件
var file = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("看清楚，这个需要图片！");
return false;
}else{
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e){
var result=document.getElementById("img");
//显示文件
result.src= this.result ;
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
nodejs利用ajax实现网页无刷新上传图片实例代码
通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormData()对象可以有效的解决这个问题 废话不多说 直接上关键代码: html部分 <div class="form-group"> <label>File input</label> <input type="file" name="file" id="file">
-
SpringMVC结合ajaxfileupload.js实现文件无刷新上传
直接看代码吧,注释都在里面 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLoc
-
jsp+ajax实现无刷新上传文件的方法
本文实例讲述了jsp+ajax实现无刷新上传文件的方法.分享给大家供大家参考,具体如下: 列表页:selectaddress.jsp js页:ajax_edit.js jsp处理页:editaddress.jsp 上传工具类:UploadUtil.java 思想:由于安全问题,javascript操纵不了文件, 导致ajax不能动态上传文件,所以选择了iframe, 列表页把form表单提交到一个隐式的iframe里面,设置表单的属性 复制代码 代码如下: enctype='multipart/
-
asp.net javascript 文件无刷新上传实例代码第1/2页
在新增数据项的时候,用ajax实现无刷新提交,但上传文件的时候,由于数据类型原因,不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用.我一共找到了两个方法予以解决,实现无刷新上传. 第一种方法:利用js的ADODB.Stream,将文件先转换成流,再通过js上传到服务器,这样有个好处就是可以上传超大文件,并且由于是数据流,可以支持断点续传.方便显示上传进度等人性化功能.唯一的缺点是要客户端浏览器需要设置安全级别,或者安装相关ActiveX控件(这个控件自己做的,加载到
-
javascript仿163网盘无刷新文件上传系统
本来觉得这个系统会很复杂,但把每个部分都分析清楚后,其实需要的技术并不高.不过当我把各个功能函数都整理好准备进行封装时,却发现要把程序封装不是那么容易,因为程序跟html的耦合度太高.然后我逐步把程序中操作html相关的部分分离出来,首先把简单的分离,接着是文件列表,然后是file控件,最后是一些提示性程序.经过几次尝试才把整个结构封装好. 仿163网盘无刷新文件上传系统 .fu_list { width:600px; background:#ebebeb; font-size:12px; }
-
js动态创建上传表单通过iframe模拟Ajax实现无刷新
复制代码 代码如下: <script> window.onload=function(){ upfile('file.php'); } /* ** url 路径 **/ function upfile(url){ //创建iframe var iframe = document.createElement("iframe"); document.body.appendChild(iframe); iframe.id = 'iframeName'; iframe.name =
-
PHP+JavaScript实现无刷新上传图片
html文件代码 <!-- ajax文件上传开始 --> <script type="text/javascript" src="/imageupload/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/imageupload/layer/layer.js"></script>
-
js实现头像图片切割缩放及无刷新上传图片的方法
本文实例讲述了js实现头像图片切割缩放及无刷新上传图片的方法.分享给大家供大家参考.具体如下: fname:后台接收时用的名字, 必填 funstr:开始上传执行的函数, 默认无 funbak:上传成功后的回调函数, 必填 furl:上传地址: 默认当前form的提交页面 注意:上传地址和当前地址必须为同意域名否则回调函数获取不到 上传成功发回的地址. a.php: $path='a.jpg'; move_uploaded_file($_FILES['uimg']['tmp_name'],$
-
asp.net+js 实现无刷新上传解析csv文件的代码
前阵子工作中用到,贴上代码,仅保留上传有关的代码,发现code其实很少. 上传页面html/js 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
JavaScript实现无刷新上传预览图片功能
无刷新上传功能如何实现?手写无刷新上传要用到两个东西,FormData和FileReader. FileReader 用于图片浏览. FormData 用于ajax请求. html代码 先创建表单跟图片的容器 <form enctype="multipart/form-data" id="oForm"> <input type="file" name="file" id="file" on
-
jQuery实现图片上传预览效果功能完整实例【测试可用】
本文实例讲述了jQuery实现图片上传预览效果功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net jquery图片上传预览效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j
-
JavaScript File API文件上传预览
对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览
-
JavaScript代码实现txt文件的上传预览功能
今天做项目刚好碰到这个记录一下.因为是简单的txt文件,只涉及文本,如果需要涉及图片预览就需要使用papaparse和jschardet,此处不多叙述. 表单按钮使用js的onchange="uploadfile()" 事件,function函数代码如下所示: //此处为txt文件上传预览的js代码 function uploadfile(){ var file=$("#txt")[0].files[0]; //判断上传文件是不是txt格式,判断后缀是不是.txt
-
Vue+SSM实现图片上传预览效果
现在的需求是:有一个上传文件按钮,当我们点击按钮时,可以选择需要上传的文件,确定后图片显示在界面上. 说明:本项目前端使用的Vue,后台用的SSM搭建的,服务器是Tomcat,数据库是MySQL 实现思路: 前端界面:当用户点击上传文件按钮,选中待上传图片并点击确认后,这时应该把图片数据传给后台.当后台经过处理后返回结果,前端在根据响应结果做后续工作. 后端:后台拿到前端传过来的数据时,将图片文件存到固定的文件夹下(这个问题是我思考了很久的,我认为应该存在服务器下,原先我是存在本地文件夹下,然后
-
javascript 图片上传预览-兼容标准
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
javascript实现移动端 HTML5 图片上传预览和压缩功能示例
本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能.分享给大家供大家参考,具体如下: 在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个API file 和 FileList 对象 file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后
-
jQuery+AJAX实现网页无刷新上传
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易
-
asp.net中MVC借助Iframe实现无刷新上传文件实例
本文实例讲述了asp.net中MVC借助Iframe实现无刷新上传文件的方法.分享给大家供大家参考.具体实现方法如下: html: 复制代码 代码如下: <div id="uploadwindow" style="display: none;"> <form action="/ShopActivitys/ImportActivityItems" id="form1" name="form1&