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

使用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

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

从Windows上传文件到Ubuntu的一种方法

由于学习需要,需要从Windows操作系统上传文件到Ubuntu中,度娘上的方法很多,这只是其中一种--借助WinSCP软件,优点:软件易于安装.整体操作非常简单.不说了,先上文.. 1.安装WinSCP  软件下载地址:http://rj.baidu.com/soft/detail/15150.html?ald 2.通过命令:ifconfig  在Ubuntu上查看IP地址: 3.在Windows操作系统上打开winSCP软件,登录winSCP 4.登录winSCP之后在windows和Ubu

Android上传图片到PHP服务器并且支持浏览器上传文件(word、图片、音乐等)

暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传的照片----->点击返回键------>显示没有选择上传图片的toast------>点击上传的图片----->打印图片的存储的物理路径---->询问是否确认上传选择的图片----->确认则显示上传成功---->取消则退出 php代码: <?php //上传文

浏览器上传文件+django后台处理

1,浏览器端端js程序 2,django后端处理程序 接收来自浏览器上传的文件,并把文件存储在一指定的路径下. product_id = request.POST.get('product_id') sign = request.POST.get('sign') file_size = request.POST.get('file_size') sw_ver = request.POST.get('sw_ver') file_dict = request.FILES.items() if not

angularJS 在edge浏览器上传文件,无法主动触发ng-click

今天发现的问题 在谷歌浏览器一直运行良好的功能,在edge浏览器不能使用. 代码参考我的另一篇博客:WebAPI Angularjs 上传文件 不能运行的原因 下图红框中的代码在edge浏览器中无法执行,也就不能执行下面的上传文件代码. 解决方案 既然原因找到了,就可以寻找解决方案了,找了一下午,有一篇有用的文章:angular ng-click程序触发,方法 我的解决方案(注意加粗加大的代码[关键哟]) JS代码如下: define(['app'], function (app) { app.

php上传文件中文文件名乱码的解决方法

想必很多朋友在进行utf8编码的php开发上传功能的时候,都会遇到这样的一个问题,就是上传中文文件名的文件时,文件名会变成乱码,其实我们可以用iconv函数对文件名进行重新编码就解决问题了 可能会有不少朋友碰到一些问题就是上传文件时如果是英文倒好原文名不会有问题,如果是中文可能就会出现乱码了,今天我来给大家总结一下导致乱码php上传文件中文文件名乱码的原因与解决办法吧. 这几天在windows下安装了XAMPP,准备初步学习一下php的相关内容.这几天接触到了php上传文件,但是出现了一个郁闷问

WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作中遇到的一个问题:公司的后端同事用bootstrap的模态框,结合WebUploadder做后台上传文件的功能的时候,发现上传按钮点击无效.同事过来请求我支援,我研究了下,发现了三种解决方案,下面具体说说是这三种方法是怎么解决的. 我们先来分析一下解决这个问题的思路: 为什么上传控件放到模态框里面就

plupload上传插件绑定事件的两种方法

在经受一天的磨难之后终于找到处理事件方法: 先引用: <script src="js/plupload.full.min.js" type="text/javascript"></script><!--必需引入--> <script src="js/i18n/zh_CN.js" type="text/javascript"></script><!--显示中文--

浏览器上传文件夹的解决方案

众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹上传,要求:服务端保留层级结构,支持10w级别的文件夹上传. 大文件上传及断点续传,要求:支持50G级的单个文件上传和续传.续传要求:在刷新浏览器后能够续传上传,在重启浏览器后能够继续上传上(关闭浏览器后重新打开),在重启电脑后能够继续上传. 支持PC端全平台,Windows,Mac,Linux 浏

本地文件上传到Linux服务器的几种方法

本文介绍几种常见的方法,把文件上传到Linux服务器中! 常见有使用:scp命令.xshell软件里的xftp程序.U盘挂载.服务器自带的lrzsz程序. 一.scp使用说明: 1.把本机的文件传给目的服务器: scp get66.pcap [email protected]:/super 备注:把本机get66.pcap拷贝到147这台服务器的super目录下,需要提供147的密码 2.在本机上执行scp,把远端的服务器文件拷贝到本机上: scp [email protected]:/supe