css上传图片或文档显示出来

在网页开发中，我们需要经常上传图片或文档，然后将其显示出来。使用CSS可以简单地实现这个过程。
首先，我们需要在HTML中创建一个文件上传的input框，并指定一个id。例如：

<input type="file" id="uploadfile" name="uploadfile">

然后，在CSS中，我们可以使用input[type=file]选择器来选择该input框，并对其进行一些样式的设置。例如：

input[type=file] {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 4px;
}

接下来，我们需要使用JavaScript来获取用户上传的文件。例如：

var fileInput = document.getElementById('uploadfile');
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function() {
  var result = reader.result;
  // 显示图片或文档
};
reader.readAsDataURL(file);

在获取到上传的文件后，我们可以使用DataURL来将其转换为base64编码的字符串，然后将其显示出来。例如：

var fileType = file.type.split('/')[0];
if (fileType === 'image') {
  var img = document.createElement('img');
  img.src = result;
  document.body.appendChild(img);
} else if (fileType === 'application' || fileType === 'text') {
  var p = document.createElement('p');
  p.innerHTML = file.name + ': ' + result;
  document.body.appendChild(p);
}

如果上传的是图片，我们可以创建一个img标签，并将其src属性设置为base64编码的字符串。如果上传的是文档，我们可以创建一个p标签，并将其innerHTML属性设置为文件名和base64编码的字符串。
至此，我们就完成了CSS上传图片或文档显示的过程。通过CSS的样式设置，我们可以让上传文件的界面更加美观、易用。通过JavaScript的编程，我们可以将上传的文件在网页中直接显示出来，提高用户的体验。