jQuery AjaxUpload Bildcode_jquery hochladen

Dieses Mal wird AJAXUPLOAD als bürstenloses Upload-Plug-in für den Upload-Client verwendet. Die neueste Version ist 3.9. Die offizielle Adresse: http://valums.com/ajax-upload/

Fügen Sie jquery.min.1.4.2.js und ajaxupload.js
in die Seite ein

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/ajaxupload3.9.js" type="text/javascript"></script>

HTML-Code:

<style type="text/css">
#txtFileName {
width: 300px;
}
.btnsubmit{border-bottom: #cc4f00 1px solid; border-left: #ff9000 1px solid;border-top: #ff9000 1px solid; border-right: #cc4f00 1px solid;text-align: center; padding: 2px 10px; line-height: 16px; background: #e36b0f; height: 24px; color: #fff; font-size: 12px; cursor: pointer;}
</style>
上传图片：<input type="text" id="txtFileName" /><div id="btnUp" style="width:300px;" class=btnsubmit >浏览</div>
<div id="imglist"></div>

JS-Code:

<script type="text/javascript">
$(function () {
var button = $('#btnUp'), interval;
new AjaxUpload(button, {
//action: 'upload-test.php',文件上传服务器端执行的地址
action: '/handler/AjaxuploadHandler.ashx',
name: 'myfile',
onSubmit: function (file, ext) {
if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {
alert('图片格式不正确,请选择 jpg 格式的文件!', '系统提示');
return false;
}
// change button text, when user selects file
button.text('上传中');
// If you want to allow uploading only 1 file at time,
// you can disable upload button
this.disable();
// Uploding -> Uploading. -> Uploading...
interval = window.setInterval(function () {
var text = button.text();
if (text.length < 10) {
button.text(text + '|');
} else {
button.text('上传中');
}
}, 200);
},
onComplete: function (file, response) {
//file 本地文件名称，response 服务器端传回的信息
button.text('上传图片(只允许上传JPG格式的图片,大小不得大于150K)');
window.clearInterval(interval);
// enable upload button
this.enable();
var k = response.replace("<PRE>", "").replace("

", ""); if (k == '-1') { alert('您上传的文件太大啦!请不要超过150K'); } else { alert("服务器端传回的串："+k); alert("本地文件名称："+file); $("#txtFileName").val(k); $("").appendTo($('#imglist')).attr("src", k); } } }); });

Serverseitiger ajaxuploadhandler.ashx-Code

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile postedFile = context.Request.Files[0];
string savePath = "/upload/images/";
int filelength = postedFile.ContentLength;
int fileSize = 163600; //150K
string fileName = "-1"; //返回的上传后的文件名
if (filelength <= fileSize)
{
byte[] buffer = new byte[filelength];
postedFile.InputStream.Read(buffer, 0, filelength);
fileName = UploadImage(buffer, savePath, "jpg");
}
context.Response.Write(fileName);
}
public static string UploadImage(byte[] imgBuffer, string uploadpath, string ext)
{
try
{
System.IO.MemoryStream m = new MemoryStream(imgBuffer);
if (!Directory.Exists(HttpContext.Current.Server.MapPath(uploadpath)))
Directory.CreateDirectory(HttpContext.Current.Server.MapPath(uploadpath));
string imgname = CreateIDCode() + "." + ext;
string _path = HttpContext.Current.Server.MapPath(uploadpath) + imgname;
Image img = Image.FromStream(m);
if (ext == "jpg")
img.Save(_path, System.Drawing.Imaging.ImageFormat.Jpeg);
else
img.Save(_path, System.Drawing.Imaging.ImageFormat.Gif);
m.Close();
return uploadpath + imgname;
}
catch (Exception ex)
{
return ex.Message;
}
}
public static string CreateIDCode()
{
DateTime Time1 = DateTime.Now.ToUniversalTime();
DateTime Time2 = Convert.ToDateTime("1970-01-01");
TimeSpan span = Time1 - Time2; //span就是两个日期之间的差额 
string t = span.TotalMilliseconds.ToString("0");
return t;
}

Bei der Entwicklung von PHP-Websites wird häufig die Datei-Upload-Funktion verwendet. Ich habe zuvor vorgestellt, wie PHP zum Implementieren der Datei-Upload-Funktion verwendet wird. Mit der Entwicklung der WEB-Technologie ist die Benutzererfahrung zum Schlüssel zur Messung des Erfolgs einer Website geworden. Heute werde ich Ihnen ein Beispiel für die Implementierung der Ajax-Datei-Upload-Funktion in PHP vorstellen Es wird eine Funktion zum Hochladen einzelner Dateien und mehrerer Dateien verwendet.

AjaxUpload

Wenn das JQuery-Plug-In AjaxUpload die Datei-Upload-Funktion implementiert, ist es nicht erforderlich, ein Formular-Upload zu erstellen. Natürlich können Sie bei Bedarf auch ein Formular-Upload erstellen.

Vorbereitung

1. Laden Sie das Jquery-Entwicklungspaket und das Datei-Upload-Plug-in AjaxUpload herunter.

2. Erstellen Sie uploadfile.html und stellen Sie das Jquery-Entwicklungspaket und das AjaxUpload-Plug-in vor

<script src="js/jquery-1.3.js"></script>
<script src="js/ajaxupload.3.5.js"></script> 

3. Erstellen Sie entsprechend den Anforderungen des JQuery-Plug-Ins AjaxUpload ein DIV, das die Ajax-Datei-Upload-Funktion auslöst

<ul> 
<li id="example"> 
<div id="upload_button">文件上传</div>
<p>已上传的文件列表:</p> 
<ol class="files"></ol>
</ul> 

Hinweis: Aus dem Code unten können wir ersehen, dass das Jquery-Plug-in AjaxUpload die Funktion zum Hochladen von Dateien basierend auf dem DIV upload_button auslöst.

Front-End-JS-Code

Ich habe im Code einen Schalter eingestellt, der je nach Bedarf dem hochgeladenen Dateityp entspricht, und außerdem festgelegt, ob eine einzelne Datei oder mehrere Dateien im Ajax-Modus hochgeladen werden sollen.

$(document).ready(function(){
var button = $('#upload_button'), interval;
var fileType = "all",fileNum = "one"; 
new AjaxUpload(button,{
action: 'do/uploadfile.php',
/*data:{
'buttoninfo':button.text()
},*/
name: 'userfile',
onSubmit : function(file, ext){
if(fileType == "pic")
{
if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
this.setData({
'info': '文件类型为图片'
});
} else {
$('<li></li>').appendTo('#example .files').text('非图片类型文件，请重传');
return false; 
}
}
button.text('文件上传中');
if(fileNum == 'one')
this.disable();
interval = window.setInterval(function(){
var text = button.text();
if (text.length < 14){
button.text(text + '.'); 
} else {
button.text('文件上传中'); 
}
}, 200);
},
onComplete: function(file, response){
if(response != "success")
alert(response);
button.text('文件上传');
window.clearInterval(interval);
this.enable();
if(response == "success");
$('<li></li>').appendTo('#example .files').text(file); 
}
});
}); 

Hinweis:

Zeile 1: $(document).ready()-Funktion, eine Funktion in Jquery, ähnlich wie window.load. Verwenden Sie diese Funktion, um die gebundene Funktion sofort aufzurufen, wenn das DOM geladen und zum Lesen und Bearbeiten bereit ist.

Zeile 3: Die Parameter fileType und fileNum stellen den Typ und die Anzahl der hochgeladenen Dateien dar. Der Standardwert ist, dass alle Dateitypen gleichzeitig hochgeladen werden können Dateien oder mehrere Dateien gleichzeitig, Sie können die Werte dieser beiden Variablen zu pic und mehr machen.

Zeilen 6 bis 8: POST-Daten an den Server Sie können statische Werte festlegen oder einige dynamische Werte über die DOM-Operationsfunktion von Jquery abrufen, z. B. den Wert von INPUT im Formular usw.

Zeile 9: Entspricht Frontend

<input type="file" name="userfile"> 

Serverseitig $_FILES['userfile']

Zeilen 10–36: Funktion wird vor dem Hochladen der Datei ausgelöst.

Zeilen 11–21: Filterfunktion des Bilddateityps. Die JQuery-SetData-Funktion wird verwendet, um den Wert von POST auf dem Server festzulegen.

Zeilen 25–26: Legen Sie fest, ob nur eine Datei oder mehrere Dateien gleichzeitig hochgeladen werden sollen. Wenn nur eine Datei hochgeladen wird, wird die Auslöseschaltfläche deaktiviert. Wenn Sie mehrere weitere Dateien übertragen möchten, stellen Sie bitte den Wert von MAXSIZE im serverseitigen PHP-Datei-Upload-Programm ein. Die Größenbeschränkung der hochgeladenen Dateien hängt natürlich auch von den Einstellungen in der PHP.INI-Datei ab.

Zeilen 28–35: Während des Datei-Upload-Vorgangs wird der Text der Schaltfläche alle 200 Millisekunden dynamisch aktualisiert, wodurch der Effekt dynamischer Eingabeaufforderungen erzielt wird. Die Funktion window.setInterval wird verwendet, um die integrierte Funktion zu jedem angegebenen Zeitpunkt auszuführen. Die Interaktionszeiteinheit ist Millisekunden.

Zeilen 37–49: Die Funktion wird ausgelöst, nachdem die Datei-Upload-Funktion abgeschlossen ist. Wenn der Server gemäß dem Rückgabewert einen Fehler meldet, fordert das Frontend die Fehlermeldung über ALERT an.

Serverseitiger PHP-Datei-Upload-Code

Es basiert im Allgemeinen auf dem zuvor vorgestellten Beispiel-Tutorial für die PHP-Datei-Upload-Funktion. Die Einstellungen für die Datei-Upload-Größe, Fehlermeldungen und andere Anweisungen wurden in diesem Artikel ausführlich erläutert.

$upload_dir = '../file/';
$file_path = $upload_dir . $_FILES['userfile']['name'];
$MAX_SIZE = 20000000;
echo $_POST['buttoninfo'];
if(!is_dir($upload_dir))
{
if(!mkdir($upload_dir))
echo "文件上传目录不存在并且无法创建文件上传目录";
if(!chmod($upload_dir,0755))
echo "文件上传目录的权限无法设定为可读可写";
}
if($_FILES['userfile']['size']>$MAX_SIZE)
echo "上传的文件大小超过了规定大小";
if($_FILES['userfile']['size'] == 0)
echo "请选择上传的文件";
if(!move_uploaded_file( $_FILES['userfile']['tmp_name'], $file_path))
echo "复制文件失败，请重新上传"; 
switch($_FILES['userfile']['error'])
{
case 0:
echo "success" ;
break;
case 1:
echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值";
break;
case 2:
echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";
break;
case 3:
echo "文件只有部分被上传";
break;
case 4:
echo "没有文件被上传";
break;
}

Zusammenfassung

Grundsätzlich wurde der Prototyp der Front-End-Ajax-Datei-Upload-Triggerfunktion und der serverseitigen PHP-Datei-Upload-Funktion eingeführt. Sie können die Front-End- und Back-End-Codes entsprechend Ihren eigenen Anforderungen oder Ihnen ergänzen kann einige Funktionen trennen, z. B. den Dateityp, die Funktion zum Hochladen einer einzelnen Datei oder mehrerer Dateien. Im Allgemeinen ist es relativ einfach, das JQuery-Plug-In AjaxUpload zu verwenden, um die Funktion zum Hochladen von Dateien zu implementieren.