1. input上传文件保存
input标签有个type为file,用于选择上传文件。在提交表单时需要注意enctype属性设置为multipart/form-data。接收文件的后端可以通过request.FILES.get('file')来拿到上传的文件对象。
<form method="post" enctype="multipart/form-data" action="{% url 'upload' %}">
{% csrf_token %}
<input type="file" name="file">
<button type="submit">上传</button>
</form>
2. input上传文件第二次获取不到
由于input的type为file,每次选择完文件后会在网页上留下缓存,因此如果用户再次选择同一个文件上传,后端是获取不到文件对象的。因此,需要在input标签中添加一个自定义的属性,让每次选择文件时都能创建新的input标签。
<input id="file" type="file" name="file">
<button type="button" onclick="document.getElementById('file').click()">选择文件</button>
<script>
document.getElementById('file').onchange = function() {
var file = this.files[0];
var input = document.createElement('input');
input.type = 'file';
input.name = 'file';
input.style.display = 'none';
this.parentNode.appendChild(input);
input.click();
this.parentNode.removeChild(this);
};
</script>
3. input上传文件夹
目前还没有原生的input组件支持上传文件夹,但是可以借助一些插件实现上传文件夹的功能,比如WebUploader,Fine uploader等。
4. input上传文件完成
上传文件完成后,可以在前端根据后端返回的数据进行提示。比如可以在页面上显示上传成功或上传失败的状态。
$.ajax({
url: '/upload/',
type: 'POST',
data: formdata,
processData: false,
contentType: false,
success: function(data) {
alert('上传成功');
},
error: function(data) {
alert('上传失败');
}
});
5. input上传文件修改按钮名字
可以修改input上传文件按钮的名字,修改后的名字会显示在选择文件的按钮上。
<input type="file" name="file" accept="image/*" onchange="document.getElementById('file').value=this.value">
二、input多文件上传
1. input多文件上传
在input标签上添加multiple属性,即可实现多文件上传功能。
<input type="file" name="file" multiple>
2. input上传文件重复上传失败
由于每个上传的文件都有唯一的文件名,因此如果上传的文件名相同则会上传失败。可以在前端对文件名进行处理,使其在后端不会重复。
<input type="file" name="file" onchange="formatFileName(this)">
<script>
function formatFileName(input) {
var files = input.files;
for (var i = 0; i < files.length; i++) {
var suffix = files[i].name.substring(files[i].name.lastIndexOf('.'));
var newname = Date.now() + suffix;
files[i].name = newname;
}
}
</script>
3. input上传文件时无法选择文件
出现这种情况一般是因为浏览器禁止访问本地文件,可以尝试更换浏览器或者检查浏览器设置。
三、input上传文件获取文件上传路径
1. input上传文件获取文件上传路径
input上传文件的path属性是只读的,无法通过JavaScript获取。
<input type="file" name="file" id="file">
<script>
var path = document.getElementById('file').value; // 获取不到上传文件的路径
</script>
2. input上传文件怎么知道上传完成
上传文件完成后,后端会返回上传文件的信息,前端可以根据这些信息判断上传是否成功。
$.ajax({
url: '/upload/',
type: 'POST',
data: formdata,
processData: false,
contentType: false,
success: function(data) {
if (data.code === 0) {
alert('上传成功');
} else {
alert('上传失败');
}
},
error: function(data) {
alert('上传失败');
}
});