如何使用ajax實現無重新整理上傳

阿新 • • 發佈：2019-01-24

ajax無重新整理上傳

詳細程式碼如下
9.upload.html

<!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;
}
?>

如何使用ajax實現無重新整理上傳

詳細程式碼如下 9.upload.html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Cont

jQuery+php+ajax實現無重新整理上傳檔案功能

jQuery+php+ajax實現無重新整理上傳檔案功能，還帶有上傳進度條動畫效果，支援圖片、視訊等大檔案上傳。 js程式碼

form+iframe實現無重新整理上傳檔案

原理：利用form的target屬性，將form的action在iframe中開啟，並接收返回結果，實現仿ajax的頁面無重新整理檔案上傳。正是action在iframe中開啟，所以，頁面才會無重

ajax頁面無重新整理上傳檔案

最近在研究struts2檔案上傳，感覺這塊無論是做企業網站還是做系統都用的挺多的，尤其是圖片上傳。但是上傳我們又有幾種方式，一種是表單提交，一種是ajax無重新整理上傳。這次我要介紹的就是struts2+ajax無重新整理上傳圖片，將圖片儲存在本地，圖片將以

iframe實現無重新整理上傳下載

最近我維護的網站在稽核時加了個上傳下載的功能，能上傳多個檔案（檔案很小、不超過3個、上傳時可以多選、且要有上傳進度），下載時有選擇的下載。頁面是用aspx做的，微軟自帶的只有單檔案上傳，於是乎想到flash。找了三個現成的，測試發現一個不相容IE9，另兩個都

利用js實現無重新整理上傳頭像（或檔案）並顯示進度條

無重新整理上傳原理：現在我們利用新技術FormData表單資料物件可以實現快速收集表單資訊，普通表單域和上傳檔案域均可以收集，再結合ajax就可以實現無重新整理上傳。那麼怎樣顯示進度條呢？原來ajax物件有upload成員，該成員也是物件，構造器是XMLHttpR

iframe實現無重新整理上傳檔案

其實在ajax出現之前，web應用也可以是無重新整理的，那時大多通過IFrame來做到這一點。當然Ajax出現之後，人們一窩蜂地投奔Ajax 的陣營了，iFrame 就乏人問津了。但是用iFrame來實現無重新整理上傳檔案確實一個很好的選擇。 [html] vi

基於jQuery的ajax系列之用FormData實現頁面無重新整理上傳

接著上一篇ajax系列之用jQuery的ajax方法向伺服器發出get和post請求寫，這篇主要寫如何利用ajax和FormData實現頁面無重新整理的檔案上傳效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData介面。

Javascript與asp.net 實現Ajax多檔案無重新整理上傳

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w

ajaxfileupload.js外掛結合一般處理檔案實現Ajax無重新整理上傳

先上幾張圖更直觀展示一下要實現的功能，本功能主要通過Jquery ajaxfileupload.js外掛結合ajaxUpFile.ashx一般應用程式處理檔案實現Ajax無重新整理上傳功能，結合NPOI2.0實現資料讀取。這個功能在實際工作種經常用到，希望能

模仿Ajax的動態無重新整理上傳檔案

使用到的jar檔案：commons-fileupload-1.3.jar，commons-io-2.4.jar jsp頁面： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

通過Ajax使用FormData物件無重新整理上傳檔案

寫在前面：本文說的這個方案有瀏覽器相容性問題；所有主流瀏覽器的較新版本已經支援這個物件了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+，對相容性比較敏感的網站慎用。在工作中遇到了一個問題：在一個頁面中，有4塊內容

Struts2+Ajax+Jquery的無重新整理上傳圖片

####備註：這裡不詳細講解Struts2的檔案上傳知識點，想了解請點選我另外一篇文章 http://blog.csdn.net/qq_25281057/article/details/52333677 ###這裡我引用了兩個js檔案，一個Jquery和一個form表單

jquery ajax 無重新整理上傳檔案到servlet

刪除檔案的表單要加入如下enctype屬性： <form id="upload" enctype="multipart/form-data"> 要實現無重新整理上傳檔案首

ajax無重新整理上傳圖片，基於springMVC

html程式碼(圖片上傳Fform表單裡的target屬性的值frameFile,是form之後的iframe的name值, 這樣的寫法是讓當前的form表單在提交表單內容的時候轉交給iframe中進行頁面中表單處理，並且不會產生當前頁面跳轉!)： <form id

ajax無重新整理上傳檔案MVC

@{ ViewBag.Title = " Assistant"; //Layout = null; } <script type="text/javascript"> $(document).ready(function () {

使用AJAX實現文件上傳時Illegal invocation錯誤

cnblogs 代碼 sda log oca mime http () code Js代碼 var formData = new FormData(); formData.append(‘userName‘,$scope.userName);

ajax實現文件上傳，多文件上傳，追加參數

bytes meta -- ets throw eal proc cti esp 1.html部分實現代碼: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

Ajax實現異步上傳圖片

添加 www. request 設置支持 bsp sta mat javax 要求：點擊頁面瀏覽按鈕後，選擇需要上傳的圖片，頁面無刷新，將上傳的圖片展示出來開發流程一：在頁面編寫表單代碼和js代碼 [html] view plain copy <%@

在SSM框架中使用AJAX實現多檔案上傳

今天來學習一下在SSM框架中使用ajax實現檔案的上傳。 1.首先我們需要一個搭建好的SSM框架專案，這個在這篇文章裡不是重點，自行先搭建好需要的專案。這裡我是用的jsp頁面來和後臺介面關聯，在jsp檔案中我們需要一個form表單，請求方法為POST,enctype="mu

如何使用ajax實現無重新整理上傳

相關推薦