我正在尝试使用blueimp的jQuery文件上传来允许用户上传文件.开箱即用,按照设置说明完美运行.但是为了在我的网站上实际使用它,我希望能够做一些事情:
该插件的所有文件都位于根目录下的文件夹中.
在所有情况下,预览显示,进度条运行,但文件无法上传,我在控制台中收到此错误:Uncaught TypeError: Cannot read property 'files' of undefined.我不明白插件的所有部分是如何工作的,这使得调试变得困难.
演示页面中的javascript:
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'file_upload/server/php/UploadHandler.php',
uploadButton = $('<button/>')
.addClass('btn')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort(); …我正在使用Blueimp jQuery文件上传插件上传文件.
我在上传但选择没有问题,maxFileSize并且acceptFileTypes不工作.
这是我的代码:
$(document).ready(function () {
'use strict';
$('#fileupload').fileupload({
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000,
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
.appendTo('#div_files');
});
},
fail: function (e, data) {
$.each(data.messages, function (index, error) {
$('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" …我设计了一个简单的表单,允许用户将文件上传到服务器.最初,表单包含一个"浏览"按钮.如果用户想要上传多个文件,他需要点击"添加更多文件"按钮,在该表单中添加另一个"浏览"按钮.提交表单后,文件上载过程将在"upload.php"文件中处理.它适用于上传多个文件.现在我需要使用jQuery的'.submit()'提交表单,并将'ajax ['.ajax()']请求发送到'upload.php'文件来处理文件上传.
这是我的HTML表单:
<form enctype="multipart/form-data" action="upload.php" method="post">
<input name="file[]" type="file" />
<button class="add_more">Add More Files</button>
<input type="button" id="upload" value="Upload File" />
</form>
这是JavaScript:
$(document).ready(function(){
$('.add_more').click(function(e){
e.preventDefault();
$(this).before("<input name='file[]' type='file' />");
});
});
以下是处理文件上传的代码:
for($i=0; $i<count($_FILES['file']['name']); $i++){
$target_path = "uploads/";
$ext = explode('.', basename( $_FILES['file']['name'][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];
if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
echo "The file has been uploaded successfully <br />";
} else{
echo "There was an error uploading the file, please try again! <br />"; …我有上传表单,允许用户上传多个文件.如果文件非常大,我决定进度条会很好.以下是我的源代码.我是jquery的新手通常我只是php但我发现ajax更加用户友好.
<div id="new_upload">
<div class="close_btn"></div>
<div id="uploads"></div>
<form action="global.func/file_upload.php" method="post" enctype="multipart/form-data" id="upload_file">
<fieldset><legend>Upload an image or video</legend>
<input type="file" id="file" name="file[]" placeholder="Upload Image or Video" multiple /><input type="submit" value="upload file" id="upload_file_btn" required />
</fieldset>
<div class="bar">
<div class="bar_fill" id="pb">
<div class="bar_fill_text" id="pt"></div>
</div>
</div>
</form>
</div>
<script>
function OnProgress(event, position, total, percentComplete){
//Progress bar
console.log(total);
$('#pb').width(percentComplete + '%') //update progressbar percent complete
$('#pt').html(percentComplete + '%'); //update status text
}
function beforeSubmit(){
console.log('ajax start');
}
function afterSuccess(data){
console.log(data);
}
$(document).ready(function(e) { …我使用jQuery-File-Upload插件.我写了一个简单的代码来测试它 - 它可以工作,但并非没有问题.done即使文件已上传且进度条已到达结束,它也不会触发.
这是代码:
$('#file_file').fileupload({
dataType: 'json',
autoUpload: true,
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo(document.body);
data.submit();
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
},
done: function (e, data) {
alert('Done');
}
});
我的输入很简单:
<input type="file" id="file_file" name="file[file]" />
我正在尝试使用jQuery File Upload和angularJS 上传文件.
我有一个多步形式,这是我的多步形式的两个步骤:
<div ng-switch="step">
<div ng-switch-when="1">
<h1>Identity</h1>
<form name="steponeForm" data-file-upload="options" enctype="multipart/form-data" novalidate autocomplete="off">
<input type="submit" ng-click="next(steponeForm.$valid)" value="next" /><br>
<span class="button fileinput-button" ng-class="{disabled: disabled}">
<input type="file" id="fileupload" name="files[]" multiple="" >
</span>
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<span>Start upload</span>
</button>
<input ng-model="application.lastName" string-pattern required type="text" placeholder="{{ 'Last name'|translate }} *" name="appname" id="appname" />
<div ng-show="steponeForm.$submitted || steponeForm.appname.$touched">
<div class="error" ng-show="steponeForm.appname.$error.required">Last name is required.</div>
<div class="error" ng-show="steponeForm.appname.$error.stringPattern">Doesn't look like a text.</div>
</div>
<input type="submit" ng-click="next(steponeForm.$valid)" value="next" …我被推荐使用blueimp上传的jQuery文件.
但我无法更新单个文件的进度.我理解合并进展如何运作(如文件所述)
progressall: function (e, data)
{
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
console.log(progress);
}
如何为每次上传做同样的事情？如何检索链接到此特定上载的DOM元素(进度条)？我正在考虑按文件名和文件大小创建一个id,但是由于用户可以将相同的文件上传两次(到不同的目的地),这不起作用.
这是我目前的实施:
$('#fileupload').fileupload(
{
dataType: 'json',
done: function (e, data)
{
$.each(data.result.files, function (index, file)
{
//$('<p/>').text(file.name).appendTo(document.body);
//console.log('done with '+file.name);
});
},
progressall: function (e, data)
{
var progress = parseInt(data.loaded / data.total * 100, 10);
//$('#progress .bar').css('width', progress + '%');
//console.log(progress);
}
}).on('fileuploadadd', function (e, data)
{
$.each(data.files, function (index, file)
{
var node = $('<div …我在我的网站上使用blueimp-file-upload,我正在使用webpack来组织我的js代码.
我从NPM安装了blueimp-file-upload和jquery.ui.widget
npm install --save blueimp-file-upload
npm install --save jquery.ui.widget
我在我的输入文件中要求blueimp-file-upload
require('blueimp-file-upload')
但是当我运行webpack时,我得到了错误:
ERROR in ./~/blueimp-file-upload/js/jquery.fileupload.js
Module not found: Error: Cannot resolve module 'jquery.ui.widget' in E:\app-parent\cooka-common-web\src\main\resources\static\node_modules\blueimp-file-upload\js
@ ./~/blueimp-file-upload/js/jquery.fileupload.js 19:8-22:19
我使用jquery文件上传将文件上传到服务器.我想限制用户上传最多6个文件.我搜索wiki jquery文件上传,但没有找到它的参数.有什么方法可以限制用户的上架数量
我正在尝试使用Blueimp的jQuery-File-Upload插件,该插件根据演示看起来很有前途.
这很容易实现:
var $uploadButton = $("#fileop-upload");// <input type="file" id="fileop-upload" [etc] />
$uploadButton.fileupload({
url : "//domain/path/to/receive-uploaded-files"
});
所选文件上传正常,无需按预期刷新页面,但当然使用这样的最小配置,用户将不会收到任何通知.这是插件的回调会派上用场的地方.
根据文档,有两种方法可以定义回调.例如,add事件(在选择上传文件时触发)可以在原始配置对象中添加,如下所示:
$uploadButton.fileupload({
add : addFileListener,
url : "//domain/path/to/receive-uploaded-files"
});
或者:
$uploadButton.bind("fileuploadadd", addFileListener);
但是我发现只有第一种方法有效,第二种方法没有做任何事情.
这是更奇怪的是,没有其他的回调-尤其是progress和start-似乎没有射击不管我如何将它们绑定:
$uploadButton.fileupload({
add : addFileListener,
progress : progressListener,
start : startListener,
url : "//domain/path/to/receive-uploaded-files"
});
要么
$uploadButton.fileupload({
add : addFileListener,
url : "//domain/path/to/receive-uploaded-files"
});
$uploadButton.bind("fileuploadprogress", progressListener");
$uploadButton.bind("fileuploadstart", startListener");
我定义了引用的侦听器函数,并且代码不会报告任何错误或警告.
该.bind方法失败的原因是什么？为什么听众progress或start听众没有激活？
jquery ×9
file-upload ×6
javascript ×4
blueimp ×3
ajax ×2
angularjs ×1
callback ×1
html ×1
multi-upload ×1
php ×1
webpack ×1