您将如何显示该文件

Question

如果使用输入类型=＆＃34;文件＆＃34;我很好奇将存储选中的实际文件？如果是这样，我将如何在div或span内显示该文件，最好是照片？我正在开展一个人们可以出售他们的东西的项目。我正在寻找一种方式来显示用户提交的图片，有点像Facebook的方式。

Answer 1

您将如何显示该文件

您可以让服务器接收表单数据，然后执行以下操作之一

从服务器本身提供已发布的文件。
将文件上传到提供文件的其他服务器或云端。

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

你需要检查文件以确保它没有恶意，并且可能随机化该名称以使攻击系统更加困难，以防止有人上传PHP shell并接管服务器。

Answer 2

我已经找到了一种方法，使用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发送到跨度。该值似乎是超长字符串而不是跨度中的图像。我将尝试解决这个问题并修复它，并在此线程上发布解决方案。

1 https://i.stack.imgur.com/2Ev4b.png 2 https://i.stack.imgur.com/L0ymG.png

输入类型=＆＃34;文件＆＃34; （实际文件？）

2 个答案:

您将如何显示该文件