ฉันจะตรวจสอบว่าไฟล์บนเซิร์ฟเวอร์ของฉันมีอยู่ใน jQuery หรือ JavaScript บริสุทธิ์หรือไม่?
ฉันจะตรวจสอบว่าไฟล์บนเซิร์ฟเวอร์ของฉันมีอยู่ใน jQuery หรือ JavaScript บริสุทธิ์หรือไม่?
คำตอบ:
ด้วย jQuery:
$.ajax({
url:'http://www.example.com/somefile.ext',
type:'HEAD',
error: function()
{
//file not exists
},
success: function()
{
//file exists
}
});
แก้ไข:
นี่คือรหัสสำหรับการตรวจสอบสถานะ 404 โดยไม่ใช้ jQuery
function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
การเปลี่ยนแปลงเล็กน้อยและสามารถตรวจสอบสถานะรหัสสถานะ HTTP 200 (สำเร็จ) แทน
แก้ไข 2: เนื่องจากการซิงค์ XMLHttpRequest ถูกคัดค้านคุณสามารถเพิ่มวิธีการยูทิลิตี้แบบนี้เพื่อทำ async:
function executeIfFileExist(src, callback) {
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if (this.readyState === this.DONE) {
callback()
}
}
xhr.open('HEAD', src)
}
แนวทางที่คล้ายกันและเป็นปัจจุบันมากขึ้น
$.get(url)
.done(function() {
// exists code
}).fail(function() {
// not exists code
})
$.ajax
ดูเหมือนจะดีกว่าถ้ามันเข้ากันได้ย้อนหลังใช่มั้ย
สิ่งนี้ใช้ได้กับฉัน:
function ImageExist(url)
{
var img = new Image();
img.src = url;
return img.height != 0;
}
ฉันใช้สคริปต์นี้เพื่อเพิ่มภาพอื่น
function imgError()
{
alert('The image could not be loaded.');
}
HTML:
<img src="image.gif" onerror="imgError()" />
ตราบใดที่คุณกำลังทดสอบไฟล์ในโดเมนเดียวกันสิ่งนี้น่าจะใช้ได้:
function fileExists(url) {
if(url){
var req = new XMLHttpRequest();
req.open('GET', url, false);
req.send();
return req.status==200;
} else {
return false;
}
}
โปรดทราบว่าตัวอย่างนี้ใช้คำขอ GET ซึ่งนอกเหนือจากการรับส่วนหัว (ทั้งหมดที่คุณต้องตรวจสอบสภาพอากาศของไฟล์ที่มีอยู่) จะได้รับไฟล์ทั้งหมด หากไฟล์มีขนาดใหญ่พอวิธีนี้อาจใช้เวลาสักครู่จึงจะเสร็จสมบูรณ์
วิธีที่ดีกว่าในการทำเช่นนี้คือเปลี่ยนบรรทัดนี้req.open('GET', url, false);
เป็นreq.open('HEAD', url, false);
async: false
, การทำงานแบบซิงโครนัสใน Firefox เวอร์ชัน 30.0 และใหม่กว่าและใน Chrome รุ่นล่าสุด / ปัจจุบันเลิกใช้งานเนื่องจากประสบการณ์การใช้งานที่ไม่เอื้ออำนวย ความพยายามในการใช้ทำให้ผลลัพธ์ล้มเหลว / ผิดพลาด ควรใช้async: true
กับฟังก์ชั่นการโทรกลับสำหรับการทำงานแบบอะซิงโครนัส
ฉันได้รับปัญหาการอนุญาตข้ามโดเมนเมื่อพยายามเรียกใช้คำตอบสำหรับคำถามนี้ดังนั้นฉันจึงไปกับ:
function UrlExists(url) {
$('<img src="'+ url +'">').load(function() {
return true;
}).bind('error', function() {
return false;
});
}
ดูเหมือนว่าจะทำงานได้ดีหวังว่าสิ่งนี้จะช่วยให้ใครบางคน!
ต่อไปนี้เป็นวิธีทำ ES7 วิธีหากคุณใช้ Babel transpiler หรือ Typescript 2:
async function isUrlFound(url) {
try {
const response = await fetch(url, {
method: 'HEAD',
cache: 'no-cache'
});
return response.status === 200;
} catch(error) {
// console.log(error);
return false;
}
}
จากนั้นในasync
ขอบเขตอื่น ๆ ของคุณคุณสามารถตรวจสอบว่ามี URL อยู่หรือไม่:
const isValidUrl = await isUrlFound('http://www.example.com/somefile.ext');
console.log(isValidUrl); // true || false
ฉันใช้สคริปต์นี้เพื่อตรวจสอบว่ามีไฟล์อยู่หรือไม่
$.ajax(url, {
method: 'GET',
dataType: 'jsonp'
})
.done(function(response) {
// exists code
}).fail(function(response) {
// doesnt exist
})
โปรดทราบว่าข้อผิดพลาดทางไวยากรณ์ต่อไปนี้จะถูกโยนทิ้งเมื่อไฟล์ที่ถูกตรวจสอบไม่มี JSON
Uncaught SyntaxError: โทเค็นที่ไม่คาดคิด <
การเรียกใช้ async เพื่อดูว่ามีไฟล์อยู่หรือไม่เป็นวิธีที่ดีกว่าเนื่องจากจะไม่ทำให้ประสบการณ์การใช้งานของผู้ใช้แย่ลงโดยรอการตอบกลับจากเซิร์ฟเวอร์ หากคุณโทร.open
ด้วยพารามิเตอร์ที่สามตั้งค่าเป็นเท็จ (เช่นในหลายตัวอย่างด้านบนhttp.open('HEAD', url, false);
) นี่เป็นการโทรแบบซิงโครนัสและคุณจะได้รับคำเตือนในคอนโซลเบราว์เซอร์
แนวทางที่ดีกว่าคือ:
function fetchStatus( address ) {
var client = new XMLHttpRequest();
client.onload = function() {
// in case of network errors this might not give reliable results
returnStatus( this.status );
}
client.open( "HEAD", address, true );
client.send();
}
function returnStatus( status ) {
if ( status === 200 ) {
console.log( 'file exists!' );
}
else {
console.log( 'file does not exist! status: ' + status );
}
}
แหล่งที่มา: https://xhr.spec.whatwg.org/
.open
ด้วยพารามิเตอร์ตัวที่สามที่ตั้งค่าไว้เพื่อtrue
ให้แน่ใจว่ามันเรียกแบบอะซิงโครนัสแบบนี้client.open("HEAD", address, true);
@Pierre
สำหรับคอมพิวเตอร์ไคลเอนต์สามารถทำได้โดย:
try
{
var myObject, f;
myObject = new ActiveXObject("Scripting.FileSystemObject");
f = myObject.GetFile("C:\\img.txt");
f.Move("E:\\jarvis\\Images\\");
}
catch(err)
{
alert("file does not exist")
}
นี่คือโปรแกรมของฉันเพื่อถ่ายโอนไฟล์ไปยังตำแหน่งเฉพาะและแสดงการแจ้งเตือนหากไม่มีอยู่
ฟังก์ชัน JavaScript เพื่อตรวจสอบว่ามีไฟล์อยู่หรือไม่:
function doesFileExist(urlToFile)
{
var xhr = new XMLHttpRequest();
xhr.open('HEAD', urlToFile, false);
xhr.send();
if (xhr.status == "404") {
console.log("File doesn't exist");
return false;
} else {
console.log("File exists");
return true;
}
}
ก่อนสร้างฟังก์ชั่น
$.UrlExists = function(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
หลังจากใช้งานฟังก์ชั่นดังนี้
if($.UrlExists("urlimg")){
foto = "img1.jpg";
}else{
foto = "img2.jpg";
}
$('<img>').attr('src',foto);
นี่เป็นการปรับตัวให้เข้ากับคำตอบที่ยอมรับได้ แต่ฉันไม่สามารถได้สิ่งที่ต้องการจากคำตอบและต้องทดสอบว่ามันทำงานได้อย่างไรเพราะมันเป็นลางสังหรณ์ดังนั้นฉันจึงวางวิธีแก้ปัญหาของฉันที่นี่
เราจำเป็นต้องตรวจสอบว่าไฟล์ในตัวเครื่องมีอยู่และอนุญาตให้เปิดไฟล์ (PDF) หากมีอยู่เท่านั้น หากคุณไม่ใช้ URL ของเว็บไซต์เบราว์เซอร์จะตรวจสอบชื่อโฮสต์โดยอัตโนมัติซึ่งจะทำงานใน localhost และบนเซิร์ฟเวอร์:
$.ajax({
url: 'YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf',
type: 'HEAD',
error: function () {
//file not exists
alert('PDF does not exist');
},
success: function () {
//file exists
window.open('YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf', "_blank", "fullscreen=yes");
}
});
สิ่งที่คุณต้องทำคือส่งคำขอไปยังเซิร์ฟเวอร์เพื่อให้ตรวจสอบแล้วส่งผลลัพธ์กลับมาให้คุณ
คุณพยายามสื่อสารกับเซิร์ฟเวอร์ประเภทใด คุณอาจต้องเขียนบริการเล็ก ๆ เพื่อตอบสนองต่อคำขอ
นี่ไม่ได้ตอบคำถามของ OP แต่สำหรับทุกคนที่ส่งคืนผลลัพธ์จากฐานข้อมูล: นี่เป็นวิธีง่ายๆที่ฉันใช้
หากผู้ใช้ไม่ได้อัปโหลด Avatar avatar
จะต้องเป็นฟิลด์NULL
ดังนั้นฉันจะแทรกอวาตาร์เริ่มต้นจากimg
ไดเรกทอรี
function getAvatar(avatar) {
if(avatar == null) {
return '/img/avatar.jpg';
} else {
return '/avi/' + avatar;
}
}
แล้วก็
<img src="' + getAvatar(data.user.avatar) + '" alt="">
มันใช้งานได้สำหรับฉันใช้ iframe เพื่อข้ามเบราว์เซอร์แสดงข้อความแสดงข้อผิดพลาด GET
var imgFrame = $('<iframe><img src="' + path + '" /></iframe>');
if ($(imgFrame).find('img').attr('width') > 0) {
// do something
} else {
// do something
}
ฉันต้องการฟังก์ชั่นที่จะส่งคืนบูลีนฉันพบปัญหาเกี่ยวกับการปิดและการไม่แสดงอารมณ์ ฉันแก้ไขวิธีนี้:
checkFileExistence= function (file){
result=false;
jQuery.ajaxSetup({async:false});
$.get(file)
.done(function() {
result=true;
})
.fail(function() {
result=false;
})
jQuery.ajaxSetup({async:true});
return(result);
},
OnReadyStateChange
เหตุการณ์ก่อนที่คุณจะตรวจสอบ HTTP_STATUS