使用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>
版权声明:本文为博主原创文章,未经博主允许不得转载。
时间: 2024-09-28 16:12:13