我很好奇,如果使用输入类型=“文件”将存储所选的实际文件?如果是这样,我将如何显示该文件,最好是一张照片,在div或跨度内?我正在制定一个项目,让人们可以出售自己的东西。我正在寻找一种方式来显示用户提交的图片,有点像Facebook的做法。输入类型=“文件”(实际文件?)
-1
A
回答
2
你会如何显示文件
你必须收到表单数据的服务器,然后执行以下
- 一个发球从服务器本身的发布文件。
- 将文件上传到另一台服务器或服务于该文件的云。
然后,您可以将此托管的URL作为图像源发送到客户端以显示它。
您需要检查该文件以确保它不是美味可能的,并且可能随机选择该名称以更难攻击系统,以防止某人上传PHP shell并接管服务器。
0
我已经想出了一种方法,使用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. 如何从输入类型文件元素中获取实际文件?
- 2. 输入文件类型
- 3. ack - 将实际的文件名绑定到文件类型
- 4. 输入类型的文件设置默认文件类型
- 5. 原型输入类型=文件
- 6. 从输入类型=“文件”获取文件并传入数组
- 7. 未知文件类型的C文件输入/输出:文件复制
- 8. 样式输入类型文件?
- 9. jQuery和输入[类型=“文件”]问题
- 10. 在Opera中的输入类型文件
- 11. Rails - 输入类型=“文件”倍
- 12. jquery输入类型文件验证
- 13. Symfony2 - 输入字段类型文件
- 14. Perl的CGI输入类型文件
- 15. Android 2.2的输入类型文件
- 16. 输入类型=“文件”样式帮助
- 17. 输入类型=“文件”不能用phonegap
- 18. 输入类型文件不工作Bulma.io
- 19. 传递输入类型文件数组
- 20. 输入类型的文件Isset设置
- 21. 上传文件和文件输入型
- 22. dart上传文件输入类型文件
- 23. 获取文件位置使用输入类型“文件”
- 24. jQuery抓取一个文件上传与输入类型='文件'
- 25. 为html输入设置默认文件类型:文件
- 26. 另一种输入类型=“文件”来读取JavaScript文件
- 27. HTML:输入类型=文件,但文件系统是服务器
- 28. 文件未使用html输入类型文件上传
- 29. 使用Grails的输入类型=文件从文件中读取
- 30. JQuery的Ajaxform与输入类型=文件和多文件