码迷,mamicode.com
首页 > Web开发 > 详细

浏览器上传文件到PHP的几种方法

时间:2015-08-04 19:12:05      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

使用H5的方法来上传文件

优点是:上传过程很方便,简单

缺点:并不是所有的浏览器都支持,兼容性比较差,现阶段不推荐使用

<div class="fr">
<!--上传文件方法一:-->
<form name="form1">

        <div class="progress">
            <div class="progress-bars" style="width:1%">
            </div>
        </div>

        <span id="upload_fail" class="red gapr">上传失败,请重试</span>
        <a id="a_upload_file" href="#" class="gap">添加文件</a>
        <input id="input_token" type="hidden" name="<?php echo $tokenName; ?>" value="<?php echo $hash; ?>">
        <input type="hidden" name="audit_type" value="<?php echo $audit_type; ?>">
        <input id="input_upload_file" type="file" name="userfile">
        </form>
</div>

JS代码

<script>
var data = <?php echo $data; ?>;
var audit_type = <?php echo $audit_type; ?>;
var process_id = <?php echo $process_id; ?>;

$(document).ready(function() {
$('#input_upload_file').hide();
$('#input_submit').hide();
$('.progress').hide();
$('#upload_fail').hide();
});
$('#a_upload_file').click(function(){
$('#input_upload_file').click();
$('.progress-bars').width("0%");
});
$('#input_upload_file').change(function(){
$('.progress').show();
$('#upload_fail').hide();
var fd = new FormData();
fd.append($('#input_token').attr("name"),$('#input_token').attr("value"));
fd.append("userfile",document.getElementById('input_upload_file').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.open("POST","http.......................");
xhr.send(fd);
});
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
$('.progress-bars').width(percentComplete+"%");
}
else {
$('.progress-bars').width("0%");
}
    }
function uploadComplete(evt) {
alert(evt.target.responseText);
$('.progress').hide();
}
function uploadFailed(evt) {
$('#upload_fail').show();
}


</script>


版权声明:本文为博主原创文章,未经博主允许不得转载。

浏览器上传文件到PHP的几种方法

标签:

原文地址:http://blog.csdn.net/u013011841/article/details/47280547

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!