css上传照片怎么做

在网页中上传照片是非常常见的功能，而CSS可以用来实现一个漂亮的上传照片按钮。下面就让我们来看看如何用CSS来实现这个功能。
首先，在HTML文档中创建一个带有input标签的表单，如下所示：

<form>
    <label for="file-upload" class="upload-btn">
       请选择一张照片
    </label>
    <input id="file-upload" type="file" style="display:none;">
</form> 

通过将input标签的样式设置为"display:none;"，我们可以隐藏默认的上传按钮。然后，我们可以使用CSS来创建自定义的上传按钮样式，使用p标签来定义样式：

<style>
    .upload-btn {
        display: inline-block;
        background-color: #337ab7;
        color: #fff;
        border-radius: 5px;
        padding: 10px 20px;
        font-size: 18px;
        cursor: pointer;
    }
</style> 

这里我们定义了一个类名为upload-btn的样式，使用了一些常用属性，比如背景色、文字颜色、圆角、内边距等。而且，我们还设置了一个指针样式，这样当用户将鼠标悬停在按钮上时，鼠标会变成一个手指，以提示用户按钮是可以点击的。
最后，我们需要用JavaScript来处理用户选择的文件，这里我们使用了jQuery：

$('input[type="file"]').change(function(e){
    var fileName = e.target.files[0].name;
    $('.upload-btn').html(fileName);
}); 

当用户选择了一个文件后，会触发change事件，我们可以通过event.target.files[0].name来获取文件名，并将其显示在按钮上。
这样，我们就完成了上传照片的功能，并使用CSS来美化了上传按钮的样式。