2010-11-21 11 views
0

私は素敵なフォームのアップロードを作るこのメソッドを実装しようとしている:フォームのアップロードの問題

www.kavoir.com/2009/02/styling-file-upload-select-input-control-input -typefile.html/

驚くほど単純ですが、私が唯一の問題は、ファイルを選択するたびに「C:\ fakepath \ filename」と表示されることです。私はマックにいて、私の人生はどこから来ているのか理解できません!ここに私のコード:

<?php 
error_reporting(E_ALL^E_NOTICE); 
ini_set('display_errors', '1'); 
if ($_POST['submit'] == "Submit") { 
$temp_file = $_FILES['upload']['tmp_name']."/".$_FILES['upload']['name']; 
$target_file = getcwd()."/uploads/".$_FILES['upload']['name']; 
// if (!move_uploaded_file($temp_file,$target_file)) { 
// 
// } 
} 


?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<title>untitled</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<style> 
    .upload { 
    position:relative; 
    width:250px; 
    height:135px; 
    border:1px solid #666; 
    padding:10px; 
    background:#DDD; 
    } 
    .loading { 
    background:rgba(50,50,50,0.8); 
    position:absolute; 
    top:0; 
    left:0; 
    width:250px; 
    height:135px; 
    } 
    .realupload { 
    position:absolute; 
    bottom:0; 
    right:0; 

    /* start of transparency styles */ 
    opacity:0; 
    -moz-opacity:0; 
    filter:alpha(opacity:0); 
    /* end of transparency styles */ 

    z-index:2; /* bring the real upload interactivity up front */ 
    width:200px; 
    } 
    form .fakeupload { 
/* background:url(uploadify/select.png) no-repeat 100% 50%; 
*/ } 
    form .fakeupload input { 
    width:238px; 
    font-family:Arial,sans-serif; 
    padding:5px; 
    border:1px solid #666; 
    background:#FFF; 
    outline:none; 
    } 
    label { 
    width:120px; 
    height:30px; 
    } 
    label img { 
    cursor:pointer; 
    } 
    .upload a.cancel { 
    position:absolute; 
    top:10px; 
    right:10px; 
    } 
</style> 
</head> 

<body> 
<div class="upload"> 
<form name="file" method="post" action="test.php" enctype="multipart/form-data"> 
<label for="realupload"><img src="uploadify/select.png" /></label> 
<div class="fakeupload"> 
    <input type="text" name="fakeupload" /> <!-- browse button is here as background --> 
</div> 
<input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" /> 
<input id="submit" type="submit" name="submit" value="Submit" /> 
</form> 
<a class="cancel" href="test.php"><img src="uploadify/cancel.png" /></a> 
<div class="loading"></div> 
</div> 
<script> 
$(document).ready(function() { 
    $('div.loading').fadeOut(0); 
}); 
$('form input.submit').click(function() { 
    $('div.loading').fadeIn(400); 
}); 
</script> 
</body> 
</html> 

答えて

1

これはブラウザのセキュリティレベルに基づいています。私はこれをWindows(IE)で遭遇しましたが、驚くことにあなたはMac上にいます。他のブラウザを使用するか、現在のブラウザのセキュリティオプションを変更してください。あまりにも保守的ではないようにしてください。

また、他のサイトのアップロードフォームもお試しください。

+0

私はこれをChromeで取得していましたが、Firefoxでファイル名を取得するだけです。非常に奇妙な。ブラウザはそれ自身のディレクトリを構成します( "fakepath"は何とか私のコードに基づいていなければなりません)? –

+0

そのページからリンクされている例でも同じパスが表示されます。非常に奇妙な! –