Heim >Web-Frontend >js-Tutorial >Ajax- und Iframe-Framework implementieren das Hochladen von Bilddateien (ausführliche Grafik- und Texterklärung).

Ajax- und Iframe-Framework implementieren das Hochladen von Bilddateien (ausführliche Grafik- und Texterklärung).

php中世界最好的语言Original: 2018-04-04 16:40:122143Durchsuche

Dieses Mal bringe ich Ihnen das Ajax- und Iframe-Framework zum Implementieren des Bild- Datei-Uploads (ausführliche Bild- und Texterklärung), welche Vorsichtsmaßnahmen für die Implementierung des Ajax- und Iframe-Frameworks gelten Hochladen einer Bilddatei wie folgt Dies ist ein praktischer Fall, schauen wir uns ihn an.

Sie sollten in der Lage sein, mehrere häufig verwendete Methoden zum Implementieren 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 Um Bilddateien hochzuladen. Eine Möglichkeit: 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);
}

upload.php-Datei:

<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('$name')</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 = 'upload.php';
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('图片链接:n'+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);
}
?>

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax-Verifizierungsbenutzername (detailliertes Bild und Text)

So verbessern Sie die Benutzererfahrung mit beforeSend

Das obige ist der detaillierte Inhalt vonAjax- und Iframe-Framework implementieren das Hochladen von Bilddateien (ausführliche Grafik- und Texterklärung).. 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：Anzeige des Fortschrittsbalkens für das Hochladen von HTML5+Ajax-Dateien (detaillierte Grafik- und Texterklärung)Nächster Artikel：Anzeige des Fortschrittsbalkens für das Hochladen von HTML5+Ajax-Dateien (detaillierte Grafik- und Texterklärung)

In Verbindung stehende Artikel

Mehr sehen