Heim > Artikel > Web-Frontend > Zwei Möglichkeiten zum Hochladen von Bilddateien mit nativen Ajax- und Iframe-Frameworks

Zwei Möglichkeiten zum Hochladen von Bilddateien mit nativen Ajax- und Iframe-Frameworks

韦小宝Original: 2018-01-10 09:57:091629Durchsuche

In diesem Artikel werden hauptsächlich die beiden Methoden des nativen Ajax- und Iframe-Frameworks zum Implementieren des Bild--Datei-Uploads im Detail vorgestellt. Freunde, die mit dem Ajax-Datei-Upload nicht vertraut sind und sich für den Ajax-Upload interessieren, können darauf verweisen. Schauen Sie sich diesen Artikel an

Sie sollten in der Lage sein, mehrere gängige Methoden zur Implementierung der asynchronen Datei-Upload-Funktion zu nennen. Die am häufigsten verwendeten Methoden sind native Ajax- und Iframe-Frameworks, um das Hochladen von Bilddateien zu erreichen Teilen Sie die Bilder mit Ihnen. Es gibt zwei Möglichkeiten, Dateien hochzuladen: natives Ajax und Iframe-Framework. Als Referenz lautet der spezifische Inhalt wie folgt

Methode 1: Verwenden Sie das Iframe-Framework, um Bilder hochzuladen

Der HTML-Code lautet wie folgt:

<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-Datei:

$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
function stopSend(str){
var im="<img src=&#39;upload/images/"+str+"&#39;>";
$("#msg").append(im);
}

Datei hochladen:

<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>";
?>

Methode 2: Original-Ajax-Datei-Upload

<!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-Code:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die Ajax- und Iframe-Frameworks zum Hochladen von Bildern zu lernen und zu verstehen Dateien.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung von AJAX zur Vervollständigung der asynchronen Überprüfung von Benutzernamen

Jquery und Iframe zum Erstellen eines Ajax-Uploads Effekt Teilen von Beispielen

JQuery Ajax verwendet FormData, um Dateien und andere Datenbeispiele im Detail hochzuladen

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten zum Hochladen von Bilddateien mit nativen Ajax- und Iframe-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Anwendungsbeispiel eines zusammengesetzten jQuery-Ereignisses in Kombination mit toggle()Nächster Artikel：Anwendungsbeispiel eines zusammengesetzten jQuery-Ereignisses in Kombination mit toggle()

In Verbindung stehende Artikel

Mehr sehen