-1

我很好奇，如果使用輸入類型=「文件」將存儲所選的實際文件？如果是這樣，我將如何顯示該文件，最好是一張照片，在div或跨度內？我正在制定一個項目，讓人們可以出售自己的東西。我正在尋找一種方式來顯示用戶提交的圖片，有點像Facebook的做法。輸入類型=「文件」（實際文件？）

2017-10-14 Robin J

你會如何顯示文件

你必須收到表單數據的服務器，然後執行以下

一個發球從服務器本身的發佈文件。
將文件上傳到另一臺服務器或服務於該文件的雲。

然後，您可以將此託管的URL作爲圖像源發送到客戶端以顯示它。

您需要檢查該文件以確保它不是美味可能的，並且可能隨機選擇該名稱以更難攻擊系統，以防止某人上傳PHP shell並接管服務器。

來源

2017-10-14 22:24:05 jrtapsell

我已經想出了一種方法，使用javascript來顯示圖片後，它被選中上傳。代碼如下（整個文檔）。

<!doctype html> 
<html lang="en" class="no-js"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 



    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> 
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset --> 
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style --> 
    <script src="js/modernizr.js"></script> <!-- Modernizr --> 

<script> 
function displayProduct(){ 
var product = document.getElementById("productTitle").value; 
var productDesc = document.getElementById("productDescription").value; 
var files = document.getElementById("blah").src; 
    document.getElementById("showProduct").style.display = "block"; 
    document.getElementById("productHead").innerHTML = product; 
    document.getElementById("productD").innerHTML = productDesc; 
    document.getElementById("photo").innerHTML = files; 
    } 

    function readURL(input) { 
      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 

       reader.onload = function (e) { 
        $('#blah') 
         .attr('src', e.target.result) 
         .width(150) 
         .height(200); 
       }; 

       reader.readAsDataURL(input.files[0]); 
      } 
      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 

       reader.onload = function (e) { 
        $('#photo') 
         .attr('src', e.target.result) 
         .width(150) 
         .height(200); 
       }; 

       reader.readAsDataURL(input.files[0]); 
      } 
     } 

</script> 

    <title>XXXXXXXXX dot Com</title> 
</head> 
<body> 
<header> 
<img src = "brownBag.jpg" width = "8%" style = "float: left;"> 
    <h3>Deal Finder dot Com</h3> 
    <nav class="cd-stretchy-nav"> 
     <a class="cd-nav-trigger" href="#0"> 
      Menu 
      <span aria-hidden="true"></span> 
     </a> 

     <ul> 
      <li><a href="http://www.nephilim42.com/mySiteIndex.html"><span>The Homepage of Nephilim42 Coding</span></a></li> 
      <li><a href="http://www.nephilim42.com/XXXXXX.html"><span>CSS Portfolio Project</span></a></li> 
      <li><a href="http://www.nephilim42.com/XXXXXX.html"><span>Javascript Portfolio Project</span></a></li> 
      <li><a href="http://www.nephilim42.com/gamedarts/gamedarts.html"><span>Play a game of Darts! Powered by Javascript</span></a></li> 
      <li><a href="http://www.nephilim42.com/XXXXXX/index.html"><span>My First Business Website</span></a></li> 
     </ul> 

     <span aria-hidden="true" class="stretchy-nav-bg"></span> 
    </nav> 

</header> 

<main class="cd-main-content"> 
<label for = "form"> 

     <form name = "postForm" id = "postForm" method = "POST" action = ""> 

      <p>What are you selling? 
       <input type = "text" name = "productTitle" id = "productTitle"> 
      </p><br> 
      <p>Please describe your product. 
       <textarea name = "productDescription" id = "productDescription" cols = "50" rows = "6"></textarea> 
      </p><br> 
      <p>Upload Picture: 
       <input type='file' onchange="readURL(this);" /> 
       <img id="blah" src="#" alt="your image" /> 
      </p> 
      <input type = "button" name = "post" id = "post" value = "POST" onClick = "displayProduct()"><br> 
     </form> 

     <div id = "showProduct"> 
      <p>Product Title: 
       <span id = "productHead"></span> 
      </p><br> 
      <p>Product Description: 
       <span id = "productD"></span> 
      </p><br> 
      <p>Uploaded Photo: 
       <span id = "photo"></span> 
      </p> 
     </div> 


<script src="js/jquery-2.1.4.js"></script> 
<script src="js/main.js"></script> <!-- Resource jQuery --> 
</body> 
</html>

下面是一些附加圖片。不幸的是，因爲我在stackOverflow上的信譽很低，只有鏈接會被附加。當將其複製並粘貼到URL搜索欄時，哪些功能可以工作。這些圖像顯示了上傳文件時發生的情況。不幸的是我遇到了一個問題，但我會努力修復它。問題在於圖像＃2。 readURL函數中的第二部分javascript是一個失敗的嘗試來解決這個問題。

圖片1）點擊上傳按鈕，選擇圖片圖片2）選擇併發布圖片後，文件的值通過innerHTML發送到一個範圍。該值似乎是超長字符串，而不是跨度中的圖像。我將嘗試着解決這個問題並解決它，並在這個線程上發佈解決方案。

https://i.stack.imgur.com/L0ymG.png

來源

2017-10-17 01:30:30

輸入類型=「文件」（實際文件？）

回答

你會如何顯示文件

相關問題