原生ajax和iframe框架實現圖片檔案上傳的兩種方式-js教程-PHP中文網

首頁

web前端

js教程

原生ajax和iframe框架實現圖片檔案上傳的兩種方式

韦小宝

Jan 10, 2018 am 09:57 AM

ajaxiframe實現

這篇文章主要為大家詳細介紹了原生ajax和iframe框架實現圖片文件上傳的兩種方式，對ajax文件上傳不熟悉和對ajax上傳感興趣的小伙伴們可以參考一下這篇文章

大家應該可以舉出幾種常用的非同步檔案上傳功能的實現方式，使用頻率較多的有原生ajax和iframe框架，實現圖片檔案上傳，下面就為大家分享圖片檔案上傳的兩種方式：原生ajax和iframe框架，供大家參考，具體內容如下

方法一：利用iframe框架上傳圖片

html程式碼如下:

<p class="frm">
<form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upfile">
</form>
<iframe src="" width="0" height="0" style="display:none;" name="tarframe"></iframe>
</p>
<p id="msg">
</p>

index.js檔：

$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
function stopSend(str){
var im="<img  src=&#39;upload/images/"+str+"&#39; alt="原生ajax和iframe框架實現圖片檔案上傳的兩種方式" >";
$("#msg").append(im);
}

upload.php檔案：

<php
$file=$_FILES[&#39;upfile&#39;];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file[&#39;tmp_name&#39;],"upload/images/".$name);
//调用iframe父窗口的js 函数
echo "<script>parent.stopSend(&#39;$name&#39;)</script>";
?>

#方法二：原始生態ajax檔案上傳

<!DOCTYPE html>
<html>
<head>
<title>Html5 Ajax 上传文件</title>
<meta charset="utf-8">
<script type="text/javascript">
var xhr;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
}
function UpladFile()
{
var fileObj = document.getElementById("file").files[0];
var FileController = &#39;upload.php&#39;;
var form = new FormData();
form.append("myfile", fileObj);
createXMLHttpRequest();
xhr.onreadystatechange = handleStateChange;
xhr.open("post", FileController, true);
xhr.send(form);
}
function handleStateChange()
{
if(xhr.readyState == 4)
{
if (xhr.status == 200 || xhr.status == 0)
{
var result = xhr.responseText;
var json = eval("(" + result + ")");
alert(&#39;图片链接:n&#39;+json.file);
}
}
}
</script>
<style>
.txt{ height:28px; border:1px solid #cdcdcd; width:670px;}
.mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #CDCDCD;height:30px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<p class="form-group">
<label class="control-label">图片</label>
<br/>
<input type=&#39;text&#39; name=&#39;textfield&#39; id=&#39;textfield&#39; class=&#39;txt&#39; />
<span onclick="file.click()" class="mybtn">浏览...</span>
<input type="file" name="file" class="file" id="file" size="28" onchange="document.getElementById(&#39;textfield&#39;).value=this.value" />
<span onclick="UpladFile()" class="mybtn">上传</span>
</p>
</body>
</html>

php程式碼：

<?php
if(isset($_FILES["myfile"]))
{
$ret = array();
$uploadDir = &#39;images&#39;.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
$dir = dirname(FILE).DIRECTORY_SEPARATOR.$uploadDir;
file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
if(!is_array($_FILES["myfile"]["name"])) //single file
{
$fileName = time().uniqid().&#39;.&#39;.pathinfo($_FILES["myfile"]["name"])[&#39;extension&#39;];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
$ret[&#39;file&#39;] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echo json_encode($ret);
}
?>

以上就是本文的全部內容，希望對大家學習理解ajax和iframe框架實現圖片檔案上傳有所幫助。

相關推薦：

使用AJAX完成使用者名稱是否存在非同步校驗實例詳解

jquery和iframe做一個ajax上傳效果實例分享

jQuery Ajax使用FormData上傳檔案和其他資料實例詳解

以上是原生ajax和iframe框架實現圖片檔案上傳的兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。