多种上传文件方法

时间:2017-09-02 标签: HTML/CSS | JavaScript

传统方式

<form action="url" method="post" enctype="multipart/form-data" >
   <input type="file" name="filename" />
   <input type="submit" value="Upload" />
</form>

无刷新上传

使用 jquery.form.js,Ajax 提交表单。

<button onclick="testUpload()">上传文件</button>
<form action="url" method="post" enctype="multipart/form-data" style="display:none" id="upload_form">
    <input type="file" name="file" id="upload_file" />
</form>

<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
function testUpload()
{
    $('#upload_file').click();
}

$('#upload_file').change(function() {
    $('#upload_form').ajaxSubmit(function(data) {
        console.log(data);
    })
})
</script>

change 事件要放在 testUpload 方法外,不然在页面未刷新的情况下,会随着点击次数重复提交。

© 2020 Lh1010 - 豫ICP备16115435号-1