大家在做网站时常常需要上传文件对不？可能觉得官网自带的上传表单有点儿鸡肋？别担心，让我来教你怎么用jQuery解决这个问题！首先，使用jQuery找到表单中的input[type=”file”]元素，对它稍微改造下。比如，把默认的上传按钮换成你喜欢的样式。接着，当你点击这个新按钮时，实际上是在模拟原按钮的点击行为，这样文件选择框就能自动弹出！
跟你说你完全可以隐形input[type=”file”]（也就是把display设置成none），把原本那个文件上传来个隐藏。然后，搞个label标签，添加个”FOR”(for属性)，想着给label设置input[type=”file”]的id。这么一来，不管是点击label还是input，都等同于在操作同一个对象！至于上传按钮要咋画，随你便！再者，你还能给这个自定义的上传按钮添点儿漂亮又实用的样式！
修改文件选择框样式
input[type="file"] {
display: none;
}
#customUpload {
border: 1px solid #ccc;
padding: 10px;
cursor: pointer;
}
朋友们是不是经常被那些固定的浏览页面弹窗和烦人的文件选择框困扰？别担心，其实现在有些浏览器已经悄悄加入了新技能。比如说WebKit引擎的浏览器，你只需用上一句很酷的代码::-webkit-file-upload-button，就可以轻松自定义所有文件选择框的文啊、色彩啊、边框之类的东西
想让文件选框看起来更好看点嘛?试试在input[type=”file”]加些装饰元素，比如说换背景色或者改变字样。虽然可能有些兼容问题，不过把握好度的话，效果还不错！
添加上传进度条和提示信息
首先，把要传送的文件和其他信息装到一个叫FormData的东西里。接下来，用ajax()函数给服务器发个POST类型的AJAX请求。别忘了在url这里填上目的地，data那里带上刚才那个FormData。最后，记得将processData和contentType设为false，这样才能处理二进制数据
input[type="file"]::-webkit-file-upload-button {
background-color: #42a5f5;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
传文件时别忘了看着点进度！你可以试试更改一下进度条的宽窄来让人知道你们在哪儿。然后留意一下上传有没有变好，通过xhr.onreadystatechange就能看到是否成功喽。最后记得告诉大伙儿上传成没成功这样大家就了解文件的全过程了
保证安全性与稳定性
虽然加点jQuery能让网站更有乐趣，但别忘了安全才是最重要的优化上传功能可得步步为营噢。
首先得看看用户说的是不是真的咯；接着，得暗中盯着点儿，提防那些不怀好意的家伙；还有，服务器里面的东西也得留心看管，比如管好文件类型、大小和位置啥的，别出岔子。
咱们就用jQuery，这玩意儿快、能干又好用，网页游戏啥的都不在话下。不过，安全性可不能忽视哟~
$(document).on('change', '#fileToUpload', function() {
var file = $(this)[0].files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
type: 'POST',
url: 'upload.php',
data: formData,
processData: false,
contentType: false,
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
$('#progress').css('width', percent + '%');
$('#percent').text(percent + '%');
}
};
return xhr;
},
success: function(data) {
$('#result').text('上传成功');
// 处理上传结果
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#result').text('上传失败');
// 处理上传错误
}
})
});
评论0