问题描述：

我很好奇，如果使用输入类型=“文件”将存储所选的实际文件？如果是这样，我将如何显示该文件，最好是一张照片，在div或跨度内？我正在制定一个项目，让人们可以出售自己的东西。我正在寻找一种方式来显示用户提交的图片，有点像Facebook的做法。输入类型=“文件”（实际文件？）

答

你会如何显示文件

你必须收到表单数据的服务器，然后执行以下

一个发球从服务器本身的发布文件。
将文件上传到另一台服务器或服务于该文件的云。

然后，您可以将此托管的URL作为图像源发送到客户端以显示它。

您需要检查该文件以确保它不是美味可能的，并且可能随机选择该名称以更难攻击系统，以防止某人上传PHP shell并接管服务器。

答

我已经想出了一种方法，使用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

输入类型=“文件”（实际文件？）

你会如何显示文件

相关推荐