如何在PHP/HTML页面上使用LPology Simple Ajax Uploader跨浏览器示例

我正在尝试安装一个具有广泛跨浏览器兼容性的上传程序（特别是对于较旧的浏览器），但只要有可能就会显示一个进度条，如果不可能，可能还会显示“上传…”字样

似乎有我想要的功能，应该很容易安装，但我的头撞在墙上。正如你所知道的，我对JavaScript是新手

这是我所做的

已将插件上载到我的服务器

已成功将APC扩展安装到PHP并启用rfc1867

创建了一个docs文件夹以保存上载，并具有正确的权限

将从中复制的UploadHandler.php文件放在一起

在我的页面上尝试了以下代码（脚本几乎完全基于LPology的跨浏览器示例）

TXT、DOC、DOCX、PDF和RTF（最大文件大小为5000K）
var progress=document.getElementById（'progress'），//进度条
loaderImg=document.getElementById（'loaderImg'）；//“加载”动画GIF
errBox=document.getElementById（'errormsg'）；
var uploader=new ss.SimpleUpload({
按钮：“上传btn”，
url:“../ajax/Simple ajax Uploader master/extras/uploadHandler.php”，//服务器端处理程序
progressUrl:“../ajax/Simple ajax Uploader master/extras/uploadProgress.php”，//启用跨浏览器进度支持（下面有更多信息）
responseType:'json'，
名称：“上载文件”，
最大尺寸：5000，
hoverClass:“ui状态悬停”，
focusClass:“ui状态焦点”，
disabledClass:“ui状态已禁用”，
onExtError:函数（文件名、扩展名）{
警报（文件名+'不是允许的文件类型。“+”\n\n“+”只允许使用TXT、DOC、DOCX、PDF和RTF文件。“）；
},
onSizeError:函数（文件名、文件大小）{
警报（文件名+'太大。（最大文件大小5000K）'；
},
startXHR：函数（文件名、大小）{
progress.style.display='inline block'；//显示进度条
this.setProgressBar（进度）；//指定为进度条
//动态添加上载开始时显示的“取消”按钮
//通过在此处执行此操作，可以确保仅在以下浏览器中添加它：
//支持取消上传
var abort=document.createElement（'button'）；
包装。追加子项（中止）；
abort.className='btn btn sm btn info'；
abort.innerHTML='Cancel'；
//添加将取消上载的单击事件侦听器
//第二个参数是上传后是否应删除按钮
//true=是，上载后删除中止按钮
//false/default=不删除
this.setabortbttn（abort，true）；
},
endXHR：函数（文件名）{
button.innerHTML='上载…'；
progress.style.display='none'；//隐藏进度条
},
startNonXHR:函数（文件名）{
loaderImg.style.display='inline block'；//显示动画GIF
},
endNonXHR:函数（文件名）{
button.innerHTML='上载…'；
loaderImg.style.display='none'；//隐藏动画GIF
}
});

---

当我点击“选择文件”按钮时，不会显示任何进度条，也不会上传任何内容。Firebug告诉我“进度”为空。非常感谢你的帮助

您需要使用引导来显示进度条

<button id="mergedp" class="btn btn-large btn-primary"> upload </button>
<div id="progressOuter" class="progress progress-striped" style="display:none;"> 
<div id="progressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
</div> 
</div>

上传

---

或者在自定义CSS的演示中使用CSS

您的开发人员控制台是否有任何指示错误的内容？另外，检查web检查器的网络选项卡，它将有ajax请求。点击它，就会得到一些不错的信息。我要冒险说，问题是路径位置。我尝试了开发人员给出的最简单示例，但仍然无法上传任何内容，也无法显示进度条。目前，我可以让它显示要上载的文件的名称和大小，但随后出现错误消息“上载名称不正确或未上载文件”。任何地方都没有上传任何内容。查看网络信息，该文件似乎以$\u POST而不是$\u文件结束。在GitHub问题部分，建议将multipart设置为true以解决此问题，但它对我不起作用。@Amina，你找到解决此问题的方法了吗？我主要是为了让它显示进度条并上传。如果你能等一个星期（我还有一个星期的时间），我会把有用的东西贴出来。我不记得上次是什么bug让我耽误了时间，但我会尝试将工作代码与损坏的代码进行比较。我从来没有发布答案，因为我挂上了一些其他问题与上传者（重命名文件；获得一个以上的上传者在页面上工作），所以没有考虑它解决了。

<input id="upload-btn" type="bHoutton" value="Choose file">
<span style="padding-left:5px;vertical-align:middle;">
<i>TXT, DOC, DOCX, PDF, and RTF (5000K max file size)</i>
</span>

<script language="JavaScript" type="text/javascript" src="ajax/Simple-Ajax-Uploader-master/SimpleAjaxUploader.min.js"></script>

<script>
var progress = document.getElementById('progress'), // progress bar
    loaderImg = document.getElementById('loaderImg'); // "loading" animated GIF
errBox = document.getElementById('errormsg');

var uploader = new ss.SimpleUpload({
        button: 'upload-btn',
        url: '../ajax/Simple-Ajax-Uploader-master/extras/uploadHandler.php', // server side handler
    progressUrl: '../ajax/Simple-Ajax-Uploader-master/extras/uploadProgress.php', // enables cross-browser progress support (more info below)
    responseType: 'json',
    name: 'uploadfile',
    maxSize: 5000,
    hoverClass: 'ui-state-hover',
    focusClass: 'ui-state-focus',
    disabledClass: 'ui-state-disabled',
    onExtError: function(filename, extension) {
        alert(filename + ' is not a permitted file type.' + "\n\n" + 'Only TXT, DOC, DOCX, PDF, and RTF files are allowed.');
    },
    onSizeError: function(filename, fileSize) {
        alert(filename + ' is too big. (5000K max file size)');
    },

    startXHR: function(filename, size) {
        progress.style.display = 'inline-block'; // show progress bar
        this.setProgressBar(progress); // designate as progress bar
        // Dynamically add a "Cancel" button to be displayed when upload begins
        // By doing it here ensures that it will only be added in browses which
        // support cancelling uploads
        var abort = document.createElement('button');
        wrap.appendChild(abort);
        abort.className = 'btn btn-sm btn-info';
        abort.innerHTML = 'Cancel';
        // Adds click event listener that will cancel the upload
        // The second argument is whether the button should be removed after the upload
        // true = yes, remove abort button after upload
        // false/default = do not remove
        this.setAbortBtn(abort, true);
    },
    endXHR: function(filename) {
        button.innerHTML = 'Uploading...';
        progress.style.display = 'none'; // hide progress bar
    },
    startNonXHR: function(filename) {
        loaderImg.style.display = 'inline-block'; // show animated GIF
    },
    endNonXHR: function(filename) {
        button.innerHTML = 'Uploading...';
        loaderImg.style.display = 'none'; // hide animated GIF
    }
});
</script>

<button id="mergedp" class="btn btn-large btn-primary"> upload </button>
<div id="progressOuter" class="progress progress-striped" style="display:none;"> 
<div id="progressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
</div> 
</div>