php文件上传前端页面样式,HTML实现美化上传文件样式

这篇文章介绍的内容是HTML实现美化上传文件i样式，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

传统写法

上传文件

效果如下图所示

这个样式调整了很长时间，最后结果都不尽人意。

非常规写法

上传文件

上传

给真正的用于上传文件的Input style='display:none;'隐藏起来，然后用一个很容易控制样式的button或者p盒子等代替。当点击button的时候，同时用js触发点击那个用于上传文件的input即可。$("#uptea").click(function () {

$("#upteainput").click();

});//下面是ajax上传文件的代码，此处就不做过多讲解。 $("#upteainput").change(function () {//如果上传文件的input内容发生了变化

$val = $("#upteainput").val(); if ($val != '') {//要上传的文件名不为空

$data = new FormData($("#upform")[0]);//创建一个formdata对象

$host = window.location.host;

$.ajax({

url: "http://" + $host + "/home/front/up-tea",

type: "POST",

data: $data,

processData: false,

contentType: false,

dataType: "json",

error: function () {

alert('Error loading XML document');

success: function (data, status) {//如果调用php成功

if (data.errno != 0) { if (data.errmsg != '') {

alert(data.errmsg);

} else {

alert("系统错误");

}

console.log(data);

alert("导入成功");

window.location.reload();

}

});

}

});

实际效果如下所示

php文件上传前端页面样式,HTML实现美化上传文件样式相关推荐

Django后台管理系统文章相片视频文件上传前端页面
Django后台管理系统文章相片文件上传如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言这篇博客针对<<Django后台管理系统文章相片文件上传& ...
大文件分片上传前端框架_基于Node.js的大文件分片上传
基于Node.js的大文件分片上传我们在做文件上传的时候,如果文件过大,可能会导致请求超时的情况.所以,在遇到需要对大文件进行上传的时候,就需要对文件进行分片上传的操作.同时如果文件过大,在网络不佳 ...
html文件怎么生产vm页面,如何使用spring mvc将Html文件转换为.vm（velocity模板）文件...
首先,您需要清楚的是,当您使用MVC时,您可以以任何您想要的方式提供页面.这是您的问题的一个可能的解决方案,这是我自己的应用程序的实际代码. 您可能想要像这样提供* .html请求. 的web.xml ...
一个html文件创造多个页面,使页眉和页脚文件包含在多个html页面中。
侃侃尔雅你可以用jQuery.将此代码放入index.html click here for google现在,当你访问index.html,您应该能够单击链接标记.
QT实现CSDN上传资源管理助手Demo之（3）请求上传资源页面并解析
欢迎关注公众号可以查看更多完整文章 QT实现CSDN上传资源管理助手Demo之(3)请求上传资源页面并解析请求自己上传的资源页面,只需要请求http://download.csdn.net/my/u ...
小米官网前端页面还原
小米官网前端页面还原网页效果图片 HTML css 初始化样式外部样式文件网页效果图片 HTML <!DOCTYPE html> <html lang="en&quo ...
前端页面适应不同分辨率
前端开发要考虑到不同分辨率电脑的页面展示问题,在开发者电脑上的界面在用户电脑上打开可能出现很大变形. 解决方案主要有: 针对不同分辨率用户设置不同的css 使用JS/jQuery动态调整使用前端框架 ...
SpringBoot的开发(3)--前端页面的搭建、前端页面的编写、分页和增删改查功能的实现...
前端页面的搭建首先我们在resources包下新建一个文件夹static,SpringBoot默认会去把static包下的文件做一个路由然后在static包下新建一个HTML File类型的文件, ...
react网页适配不同分辨率_前端页面适应不同分辨率
前端开发要考虑到不同分辨率电脑的页面展示问题,在开发者电脑上的界面在用户电脑上打开可能出现很大变形. 解决方案主要有: 针对不同分辨率用户设置不同的css 使用JS/jQuery动态调整使用前端框架 ...

php文件上传前端页面样式,HTML实现美化上传文件样式

php文件上传前端页面样式,HTML实现美化上传文件样式相关推荐

最新文章

热门文章