jQuery AjaxUpload muat naik imej code_jquery

Kali ini, AJAXUPLOAD digunakan sebagai pemalam muat naik tanpa berus klien muat naik Versi terbaharunya ialah 3.9 Alamat rasmi: http://valums.com/ajax-upload/
.

Perkenalkan jquery.min.1.4.2.js dan ajaxupload.js
ke dalam halaman

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

Kod HTML:

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

kod js:

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

Kod ajaxuploadhandler.ashx sebelah pelayan

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

Dalam pembangunan laman web PHP, fungsi muat naik fail sebelum ini saya telah memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi muat naik fail. Dengan perkembangan teknologi WEB, pengalaman pengguna telah menjadi kunci untuk mengukur kejayaan laman web Hari ini saya akan berkongsi dengan anda contoh cara menggunakan Jquery untuk melaksanakan fungsi muat naik fail Ajax dalam PHP digunakan, yang boleh melaksanakan satu fail dan fungsi muat naik Berbilang fail.

AjaxUpload

Apabila pemalam Jquery AjaxUpload melaksanakan fungsi muat naik fail, tidak perlu mencipta borang borang Ia boleh merealisasikan muat naik fail dalam mod Ajax, anda juga boleh membuat borang seperti yang diperlukan.

Persediaan

1. Muat turun pakej pembangunan Jquery dan pemalam muat naik fail AjaxUpload.

2. Cipta uploadfile.html dan perkenalkan pakej pembangunan Jquery dan pemalam AjaxUpload

<script></script>
<script src="js/ajaxupload.3.5.js"></script> 

3 Mengikut keperluan pemalam Jquery AjaxUpload, buat DIV yang mencetuskan fungsi muat naik fail Ajax

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

Nota: Daripada kod di bawah, kita dapat melihat bahawa pemalam Jquery AjaxUpload mencetuskan fungsi muat naik fail berdasarkan DIV butang muat naik.

Kod JS bahagian hadapan

Saya menetapkan suis dalam kod untuk memadankan jenis fail yang dimuat naik mengikut keperluan, dan juga menetapkan sama ada untuk memuat naik satu fail atau berbilang fail dalam mod Ajax.

$(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); 
}
});
}); 

Nota:

Baris 1: fungsi $(document).ready(), fungsi dalam Jquery, serupa dengan window.load Gunakan fungsi ini untuk memanggil fungsi terikat serta-merta apabila DOM dimuatkan dan sedia untuk dibaca dan dimanipulasi.

Baris 3: FileType dan fileNum parameter mewakili jenis dan bilangan fail yang dimuat naik Nilai lalai ialah semua jenis fail boleh dimuat naik pada masa yang sama fail atau berbilang fail pada masa yang sama, anda boleh Nilai kedua-dua pembolehubah ini menjadi gambar dan banyak lagi.

Baris 6~8: POST data ke pelayan Anda boleh menetapkan nilai statik atau mendapatkan beberapa nilai dinamik melalui fungsi operasi DOM Jquery, seperti nilai INPUT dalam bentuk, dsb.

Baris 9: Bersamaan dengan bahagian hadapan

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

$_FILES ['fail pengguna'] di sebelah pelayan

Baris 10~36: Fungsi dicetuskan sebelum muat naik fail.

Baris 11~21: Fungsi penapisan jenis fail imej, Jquery setData fungsi digunakan untuk menetapkan nilai POST ke pelayan.

Baris 25~26: Tetapkan sama ada untuk memuat naik hanya satu fail atau berbilang fail pada masa yang sama Jika hanya satu fail dimuat naik, butang pencetus akan dilumpuhkan. Jika anda ingin memindahkan beberapa fail lagi, sila tetapkan nilai MAXSIZE dalam program muat naik fail PHP sebelah pelayan Sudah tentu, had saiz fail yang dimuat naik juga berkaitan dengan tetapan dalam fail PHP.INI.

Baris 28~35: Semasa proses muat naik fail, teks butang dikemas kini secara dinamik setiap 200 milisaat, mencapai kesan gesaan dinamik. Fungsi window.setInterval digunakan untuk melaksanakan fungsi terbina dalam setiap masa yang ditentukan Unit masa interaksi ialah milisaat.

Baris 37~49: Fungsi dicetuskan selepas fungsi muat naik fail selesai Jika pelayan melaporkan ralat mengikut nilai pulangan, bahagian hadapan menggesa mesej ralat melalui ALERT.

Kod muat naik fail PHP sebelah pelayan

Ia biasanya disesuaikan daripada tutorial contoh kod fungsi muat naik fail PHP yang diperkenalkan sebelum ini. Tetapan saiz muat naik fail, mesej ralat dan arahan lain yang terlibat telah diterangkan secara terperinci dalam artikel ini.

$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;
}

Ringkasan

Pada asasnya, prototaip fungsi pencetus muat naik fail Ajax bahagian hadapan dan fungsi muat naik fail PHP bahagian pelayan telah diperkenalkan Anda boleh menambah kod bahagian hadapan dan belakang mengikut keperluan anda sendiri, atau anda boleh memisahkan beberapa fungsi, seperti jenis fail, fail tunggal atau fungsi muat naik berbilang fail. Secara umum, agak mudah untuk menggunakan pemalam Jquery AjaxUpload untuk melaksanakan fungsi muat naik fail.