文件上传,并在页面上查看

1、显示上传页面index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="images/css.css" rel="stylesheet" type="text/css">
<title>Insert title here</title>
</head>
<body>

<!--enctype 里的东西是固定写法,上传必须要有它-->
<form enctype="multipart/form-data" action="update.php" method="post">
 <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
 上传文件: <input type="file" name="userfile" />

 <input type="submit" value="上传" ></input>


</form>

  <a href="download.php">下载</a>
  <a href="look.php">查看</a>

 

</body>
</html>

2、执行上传功能页面update.php

<?php
 /*
  * 把用户上传得文件连同文件的基本信息保存到数据库里
  */
header('Content-Type: text/html; charset=GBK');
//创建一个常量
define('MAX_SIZE',2000000);
define('URL',dirname(__FILE__).'\upload');

//判断上传错误情况
 if ($_FILES['userfile']['error'] > 0) {
  switch ($_FILES['userfile']['error']) {
   case 1: echo "<script>alert('上传文件超过约定值1');history.back();</script>";
    break;
   case 2: echo "<script>alert('上传文件超过约定值2');history.back();</script>";
    break;
   case 3: echo "<script>alert('部分被上传');history.back();</script>";
    break;
   case 4: echo "<script>alert('没有任何文件被上传');history.back();</script>";
    break;
  }
  exit;
 }

 //判断配置大小
 if ($_FILES['userfile']['size'] > MAX_SIZE) {
  echo "<script>alert('上传文件不得超过2M');history.back();</script>";
  exit;
 }


 //判断目录是否存在
 if (!is_dir(URL)) {
  mkdir(URL,0777);  //最大权限0777,意思是,如果没有这个目录,那么就创建
 }

 if (is_uploaded_file($_FILES['userfile']['tmp_name'])) {
  //就在这里移动了。
  //第一个参数,写上临时文件的地址,
  //第二个参数,第二个参数写上你要存放的地址

  //先去判断这个目录是否存在。

  //如果想屏蔽掉警告,直接加上@

  if (!@move_uploaded_file($_FILES['userfile']['tmp_name'],URL.'/'.$_FILES['userfile']['name'])) {
   //如果移动失败,就失败
   echo "<script>alert('移动失败');history.back();</script>";
   exit;
  }

 } else {
  echo "<script>alert('临时文件夹找不到上传的文件');history.back();</script>";
  exit;
 }

 //全部通过就上传成功了。
 //必须传一个值给success.php
 //文件上传的地址
 echo "<script>alert('文件上传成功');location.href='success.php?url=".$_FILES['userfile']['name']."';</script>"

?>

3、上传成功页面success.php

<?php
 /*
  * 显示文件信息
  */

 $url = $_GET['url'];
 echo '<img src="upload/'.$url.'" />';


?>

 

 

 

 

好的,这个问题我可以回答。在 HTML 中,可以使用 `<input>` 标签的 `type="file"` 属性来创建一个文件上传控件,并使用 JavaScript 将上传的文件路径显示在页面上。具体步骤如下: 1. 在 HTML 中,创建一个文件上传控件: ```html <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <button type="submit">Upload</button> </form> ``` 这里的 `enctype="multipart/form-data"` 属性是必须的,用于告诉服务器这个表单包含文件上传的内容。 2. 在服务器端,处理文件上传请求,并返回文件路径: ```python @app.route('/upload', methods=['POST']) def upload(): file = request.files['file'] filename = file.filename file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename) # 将文件路径返回给客户端 return file_path ``` 这里的 `file_path` 是上传文件保存的路径。 3. 在客户端,使用 JavaScript 发送文件上传请求,并将上传后返回的文件路径显示在页面上: ```html <form> <input type="file" id="file"> <button type="button" onclick="uploadFile()">Upload</button> </form> <p>File path: <span id="file-path"></span></p> <script> function uploadFile() { var fileInput = document.getElementById('file'); var file = fileInput.files[0]; var formData = new FormData(); formData.append('file', file); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.onload = function() { if (xhr.status === 200) { var filePath = xhr.responseText; document.getElementById('file-path').innerHTML = filePath; } }; xhr.send(formData); } </script> ``` 这里的 `uploadFile()` 函数使用 XMLHttpRequest 对象发送文件上传请求,并在上传完成后将返回的文件路径显示在页面上。 这样,就可以在 HTML 中上传文件并在页面上显示文件路径了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值