使用Ajax上传图片到服务器（不刷新页面）

有时候我们需要上传图片时不刷新页面,那么Ajax就是很好的东西哦.之前在网上找了很多的资料都不对,不是这里就是那里错,这是本人亲自测试了的哈,是没有问题的,若有不足之处希望指正.我用的.net,对了这里还需要引用Jquery跟Jquery.form.js两个文件,没看到上传附件在哪里咯,需要的朋友可以给我留言哈前台代码 Default2.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&…

ajax上传图片到服务器

通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传),在使用ajax上传时需要注意. html代码: js代码: 当上传完成,我们可以拿到控制台的信息: Content-Type:multipart/form-data 注意:我们在使用data:formData 传数据时,不能写为 data:{data:formData}这种键值对的格式,这样后台拿到的数据就不再是…

js ajax上传图片到服务器

$("#up_goods_pic").on('change',function(){ var file = this.files[0]; var url = webkitURL.createObjectURL(file); /* 生成图片 * ---------------------- */ var $img = new Image(); $img.onload = function() { //生成比例 var width = $img.width, height = $img.h…

确认框的使用。弹出一个确认框，Ajax提交一个请求，刷新页面。

视图: <td> @if (item.ReviewProject.DeclareState == DeclareOrReviewState.正在进行 && !item.IsSubmit) { @Html.ActionLink("编辑", "Edit", new { id = item.ApplicationProjectID }) <text> |</text> @Html.ActionLink("删除&…

ajax上传图片到服务器简单操作

前端: 通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传),在使用ajax上传时需要注意. html代码: js代码: 当上传完成,我们可以拿到控制台的信息: Content-Type:multipart/form-data 注意:我们在使用data:formData 传数据时,不能写为 data:{data:formData}这种键值对的格式,这样后台拿到的数据…

Ajax请求数据与删除数据后刷新页面

1.ajax异步请求数据后填入模态框请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" onclick="query(${register.id})"> <span class="glyphicon glyphicon-search"></span></a> ajax异步请求数据后给id为queryInfo的模态…

使用ajax和history.pushState无刷新改变页面URL onpopstate（转）

Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).responseText; var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).responseText; 转自:使用ajax和history.pushState无刷新改变页面URLjQuery-Pjax(push…

基于jQuery的ajax系列之用FormData实现页面无刷新上传

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击“ajax提交”,将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代码看下h…

Ajax回退刷新页面问题的解决办法

在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm 这篇文章主要介绍了Ajax回退刷新页面问题的解决办法的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧 Ajax 简介: AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步…

Ajax异步调用http接口后刷新页面

使用Ajax的目的就是提高页面响应速度,无需同步调用,无需整个页面刷新.这里直接在html中使用js来实现: 先获取XMLHttpRequest对象 var xmlHttp; //创建一个xmlHttpRequest对象 window.onload = function createxmlHttp() { try { //尝试创建 xmlHttpRequest 对象,除 IE 外的浏览器都支持这个方法. xmlHttp = new XMLHttpRequest(); } catch (e)…

不使用Ajax，如何实现表单提交不刷新页面

不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="multipart/form-data"表示表单既有文本数据,又有文件等二进制数据.但是使用用Ajax没有enctype="multipart/form-data",所以不能直接上传文件,所以采用FormData对象包含数据上传. 这里我们不使用Ajax,直接提交表单,添加一个隐藏得i…

Ajax– 刷新页面【转】

jquery刷新页面(局部及全页面刷新) 2009-12-31 11:39:32| 分类: javascript|举报|字号订阅局部刷新: 这个方法就多了去了,常见的有以下几种: $.get方法,$.post方法,$.getJson方法,$.ajax方法如下前两种使用方法基本上一样 $.get("Default.php", {id:"1″, page: "2″ },function(data){//这里是回调方法.返回data数据.这里想怎么处理就怎么处理了…

使用AJAX做关键字查询：输入框变化自动搜索、无刷新页面;

使用AJAX做关键字查询要求:1.无刷新页面2.输入框变化自动搜索 <style type="text/css"> .k{ width:150px; height:30px; border-bottom:1px solid #09F; text-align:center; line-height:30px; vertical-align:middle} </style> </head> <body> <table width=&qu…

AJAX JQuery 调用后台方法返回值（不刷新页面）

AJAX JQuery 调用后台方法返回值(不刷新页面) (1)无参数返回值(本人亲试返回结果不是预期结果) javascript方法: $(function () { //无参数返回值 $("#btn_Ajax1").click(function () { $.ajax({ type: "Post", //方法所在页面和方法名 url: "Ajax_Test.…

解决Ajax.BeginForm还是刷新页面的问题

在.net mvc中用Ajax.BeginForm来实现异步提交,在Ajax.BeginForm里面还是可以用submit按钮,一般来说 submit按钮是提交整个页面的数据.但是在Ajax.BeginForm里面使用submit,提交的也只是当前Ajax.BeginForm里面的数据.不过在使用这个东西的时候遇到个问题,就是点击submit按钮,也还是刷新页面了,这时突然感觉Ajax.BeginForm就是个没用的东西.后来想想,不对啊,既然能叫Ajax.BeginForm,那么肯定能够局部刷…

Ajax 实现无刷新页面

注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这里须要说明一些知识: 1.Ajax 无刷新页面的优点:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待载入页面而出现的空白状态: 2.那么.Ajax 无刷新页面是执行在动态页面(.php)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现…

ajax的分页查询（不刷新页面）

既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 <div> <input type="text" id="key" /> //输入查询字的文本框 <input type="but…

使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进行的源码: /** * js使用form上传图片,支持本地预览选中的图片,支持携带自定义参数 * @param {string} params.previewImgId 预览图片控件id,可以预览上传图片 * @param {string} params.url 提交上传的url * @param…

php ajax返回无故刷新页面

1 前言一个php页面,里面两个$.POST请求,一个会刷新页面,一个不会,然后就拉出来研究一下了,仅作为记录使用. 2 代码 HTML代码: <input value="查找" type="button" id="submit" onclick="return get_example_info()">//点击不会触发整个页面刷新 <!--<button id="submit" o…

jQuery 使用ajax，并刷新页面

JSF中使用f:ajax标签无刷新页面改变数据

ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的facelets内置了一个ajax标签,可用于简单的ajax操作. f:ajax 有几个常用属性,分别是:event.listener.render. 1.event:event 对应一个js事件名,该事件名省略了开头的”on“字符,例如点击事件是onclick,那么只需要填入click即可.类似事件还…

使用jquery结合ajax做下拉刷新页面，上拉加载页面，俗称分页

jquery结合iscroll.js做下拉刷新页面,上拉加载页面先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上拉加载</title> <meta name="viewport" content="width=device-w…

AJAX请求也会重新刷新整个页面？

由于对HTML的一些内置行为不理解,所以面对今天的AJAX请求也会重新绘页面百思不得其解. 后来,请教跟伟哥同属前端组的杨成之后,才知道是由于button的默认行为导致的. 需要阻止这种标签行为,才可以自由使用AJAX. 涨知识啦... 原来的HTML. <button class="btn-multi-status uk-button uk-button-primary" status_type = "restart"><i class=&quo…

vuejs使用FormData对象，ajax上传图片文件

我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图前端实现 <template> <div class="admin"> <d…

ajax+FormData+javascript实现无刷新表单信息提交

ajax+FormData+javascript实现无刷新表单信息提交原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 <!DOCTYPE html > <html> <head> <meta http-equiv=&qu…

是不是content-type: text/html的数据包一到，浏览器就肯定刷新页面？

整理自:http://q.cnblogs.com/q/54726/ 是不是content-type: text/html的数据包一到,浏览器就肯定刷新页面? 或者说,浏览器收到的状态正常的content-type:text/html这种数据...除了把它解析成网页显示出来,还有什么可能? 其实还是想关心到底什么时候浏览器会刷新页面.听到一种说法是url不改变的时候,或者不发生重定向的时候,页面是不会刷新的. 以前client-server模式下没有“不刷新”的说法,只要客户端发请求,服务器答复了…

ajax上传图片

选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面需要引入ajaxfileupload.js js代码 <script type="text/javascript"> $(function() { $("#file").live("change", function() {//现在这个已经适用于多个file表单. ajaxFileUpload($(this).attr("id")…

C#使用phantomjs，爬取AJAX加载完成之后的页面

1.开发思路:入参根据apiSetting配置文件,分配静态文件存储地址,可实现不同站点的静态页生成功能.静态页生成功能使用无头浏览器生成,生成之后的字符串进行正则替换为固定地址,实现本地正常访问. 2.已发现问题:如果js在载入页面时进行某些重写dom操作,已用正则替换掉的动态路径代码,会被覆盖,导致本地访问无效. 这一点只能是站点开发那边重新对页面进行优化,从而避免这种情况. 但是这仅影响本地情况,如果静态页面部署到服务器,使用相对路径其实也不会影响. using Newtonsoft.Js…

解决webpack打包vue项目后，部署完成后，刷新页面页面404

1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷新页面页面不会丢失实现原理写一个window事件我监听url的变化,那我就能实先路由,那样我就可以根据url的变化,来通过ajax请求参数来渲染页面,一个url对应一个页面,就不会重复.window.addEventListener(‘hashchange‘,function(){self.…

三种上传文件不刷新页面的方法讨论：iframe/FormData/FileReader

发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q…

【使用Ajax上传图片到服务器（不刷新页面）】的更多相关文章