ajax实现无刷新上传文件功能

本文实例为大家分享了ajax实现无刷新上传文件功能的具体代码，供大家参考，具体内容如下

详细代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax无刷新上传文件</title>
<script>
window.onload = function(){
  var oBtn = document.getElementById('btn');
  var oMyFile = document.getElementById('myFile');

  oBtn.onclick = function() {
    //alert(oMyFile.value); //获取到的是file控件的value值,这个内容是显示给你看的文字,不是我们选择的文件

    //oMyFile.files file控件中选择的文件列表对象
    //alert(oMyFile.files);

    //我们是要通过ajax把oMyFile.files[0]数据发送给后端

    /*
    for (var attr in oMyFile.files[0]) {
      console.log( attr + ' : ' + oMyFile.files[0][attr] );
    }
    */

    //利用ajax发送必须要有一个ajax对象
    var xhr = new XMLHttpRequest();

    //监听上传事件
    xhr.onload = function(){
      //alert(1);
      //alert(this.responseText);//后端返回的数据
      var d = JSON.parse(this.responseText);

      alert(d.msg + ' : ' + d.url); //显示上传成功 并且显示文件路径
    }

    xhr.open('post','post_file.php',true); //open打开的方式不能使用get,上传文件的地址,使用异步上传
    //在使用post发送的时候必须要带一些请求头信息
    xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest');
    //send要发送数据
    //将要上传的数据转换成二进制数据
    //那么必须知道后端接收当前文件的名称是什么 然后后面带上当前文件的数据

    var oFormData = new FormData(); //通过FormData来构建提交数据
    oFormData.append('file',oMyFile.files[0]);

    xhr.send(oFormData);
  }
}
</script>
</head>
<body>
  <input type="file" id="myFile" /><input type="button" id="btn" value="上传" />
</body>
</html>

后端php代码post_file.php

<?php
header('Content-type:text/html; charset="utf-8"');
$upload_dir = 'uploads/';

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
  exit_status(array('code'=>1,'msg'=>'错误提交方式'));
}

if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0 ){

  $pic = $_FILES['file'];

  if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
    exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_dir.$pic['name']));
  }
}
echo $_FILES['file']['error'];
exit_status(array('code'=>1,'msg'=>'出现了一些错误'));

function exit_status($str){
  echo json_encode($str);
  exit;
}
?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery+AJAX实现网页无刷新上传

    jQuery+AJAX实现网页无刷新上传

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

  • jsp+ajax实现无刷新上传文件的方法

    jsp+ajax实现无刷新上传文件的方法

    本文实例讲述了jsp+ajax实现无刷新上传文件的方法.分享给大家供大家参考,具体如下: 列表页:selectaddress.jsp js页:ajax_edit.js jsp处理页:editaddress.jsp 上传工具类:UploadUtil.java 思想:由于安全问题,javascript操纵不了文件, 导致ajax不能动态上传文件,所以选择了iframe, 列表页把form表单提交到一个隐式的iframe里面,设置表单的属性 复制代码 代码如下: enctype='multipart/

  • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

    本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

  • localResizeIMG先压缩后使用ajax无刷新上传（移动端）

    下面通过文字说明和代码分析的方式给大家分享移动端图片上传之localResizeIMG先压缩后ajax无刷新上传,具体实现过程请看下文. 现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片

  • swfupload ajax无刷新上传图片实例代码

    最近自己做项目的时候需要添加一个功能,上传用户的图片,上传用户图片其实涉及到很多东西,不只是一个html标签<input id="File1" type="file" />或者asp.net封住好的FileUpload 控件,现在网站不再讲究的是功能性,更多的是用户体验性,在这里上传图片就需要用到ajax无刷新上传图片,这里面包含的东西不是一点半点.这里用到的是一个插件swfupload 实现无刷新上传图片.直接上传我的代码供大家参考. 前台代码区: 复

  • 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 =

  • 利用ajaxfileupload插件实现文件上传无刷新的具体方法

    做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js) ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件 直接上代码吧

  • ajax(iframe)无刷新提交表单、上传文件

    找遍资料得出结果:不能 不过同时也找到了解决办法,就是用iframe的方式来提交表单,即实现无刷新提交表单又可以上传文件! 一.HTML代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

  • php ajax无刷新上传图片实例代码

    AJAX 客户端页面代码: index.html 复制代码 代码如下: <html> <body> <h1>Ajax file upload sample</h1><br/><input id="uplaod" name="btn_send" type="button" value="上传测试"/> <div id=result></di

  • ajax实现无刷新上传文件功能

    本文实例为大家分享了ajax实现无刷新上传文件功能的具体代码,供大家参考,具体内容如下 详细代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ajax无刷新上传文件</title> <script> window.o

  • Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】

    本文实例讲述了Jquery+AJAX实现无刷新上传并重命名文件操作.分享给大家供大家参考,具体如下: index.html <!DOCTYPE html> <html> <head> <title>Ajax上传图片</title> <meta charset="utf-8"> <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"

  • 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

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

  • 使用jQuery ajaxupload插件实现无刷新上传文件

    项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件. 代码如下 使用方法如下 <script type="text/javascript"> $(function () { var button = $('#upload'); new AjaxUpload(button, { action: '/upload/imagesAjaxUpload', name: 'upload', onSubmit: f

  • 通过隐藏iframe实现无刷新上传文件操作

    其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了.但是用iFrame来实现无刷新上传文件确实一个很好的选择. 解决办法是通过一个隐藏的iframe来处理上传操作我采用的是ReactJS,amazeui,nodejs 1.html target指向iframe的name,就是把上传后的操作交给iframe来处理. <form id="supplyformFile&qu

  • php+iframe实现隐藏无刷新上传文件

    首先ajax不能上传文件,这误导了我有段时间,今晚睡不着就照着说明做了个无刷新上传文件 其实原理很简单 复制代码 代码如下: <form enctype="multipart/form-data" method="POST" target="upload" action="http://localhost/class.upload.php" > <input type="file" nam

  • asp.net中MVC借助Iframe实现无刷新上传文件实例

    本文实例讲述了asp.net中MVC借助Iframe实现无刷新上传文件的方法.分享给大家供大家参考.具体实现方法如下: html: 复制代码 代码如下: <div id="uploadwindow" style="display: none;">     <form action="/ShopActivitys/ImportActivityItems" id="form1" name="form1&

  • PHP无刷新上传文件实现代码

    index.html 复制代码 代码如下: <html> <head> <title>无刷新上传文件</title> <meta Content-type="text/html" charset="utf-8" /> <script type="text/javascript"> function startUpload() { document.getElementById

  • 通过Ajax使用FormData对象无刷新上传文件方法

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比较敏感的网站慎用. 在工作中遇到了一个问题:在一个页面中,有4块内容,每块内容都包含一个图片上传功能,希望可以实现一键把这四块内容都上传上去. 我没有用插件实现上传功能,就是用的input[type=file],因此就遇到一个问题就是: ①传统的form表单会导致页面刷新,无法实现上述功能 ②把表单

随机推荐