jqueryui和BlueImp上传器-列表对象
我正在使用jQueryUI和jQueryBlueImp文件上传程序。使用上传器,我想用jQuery UI创建可拖放的UI对象 但是,为了做到这一点,我需要在显示的文件的正面和背面附加一个jqueryui和BlueImp上传器-列表对象,jquery,jquery-ui,jquery-ui-sortable,blueimp,Jquery,Jquery Ui,Jquery Ui Sortable,Blueimp,我正在使用jQueryUI和jQueryBlueImp文件上传程序。使用上传器,我想用jQuery UI创建可拖放的UI对象 但是,为了做到这一点,我需要在显示的文件的正面和背面附加一个和标记。例如,在下面的脚本中,我使用上载程序显示上载的每个图像的缩略图 如何将li前置并将/li追加到正在显示的每个图像中 <script> /*jslint unparam: true, regexp: true */ /*global window, $ */ $(function () {
和标记。例如,在下面的脚本中,我使用上载程序显示上载的每个图像的缩略图
如何将li
前置并将/li
追加到正在显示的每个图像中
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === '' ?
'' : 'server/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();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mp4)$/i,
maxFileSize: 50000000, // 5 MB
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
//.append($('<span/>').text(file.name));
if (!index) {
node
.append('')
// .append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append(file.error);
}
if (index + 1 === data.files.length) {
data.context.find('button')
// .text('Upload2')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
// var link = $('<a>')
// .attr('target', '_blank')
// .prop('href', file.url);
$(data.context.children()[index])
// .wrap(link);
});
}).on('fileuploadfail', function (e, data) {
$.each(data.result.files, function (index, file) {
var error = $('<span/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
/*jslint:true,regexp:true*/
/*全局窗口,$*/
$(函数(){
"严格使用",;
//将此更改为服务器端上载处理程序的位置:
var url=window.location.hostname==''?
'''server/php/',
uploadButton=$('')
//.addClass('btn')
.prop('disabled',true)
//.text('正在处理…')
.on('单击',函数(){
变量$this=$(this),
data=$this.data();
美元这个
.off('单击')
.text(“中止”)
.on('单击',函数(){
$this.remove();
data.abort();
});
data.submit()始终(函数(){
$this.remove();
});
});
$('#fileupload')。fileupload({
url:url,
数据类型:“json”,
自动上传:对,
acceptFileTypes:/(\.\/)(gif | jpe?g | png | mp4)$/i,
最大文件大小:50000000,//5 MB
//启用图像大小调整,Android和Opera除外,
//它实际上支持图像大小调整,但无法
//通过XHR请求发送Blob对象:
disableImageResize:/Android(?。*Chrome)| Opera/
.test(window.navigator.userAgent),
预览最大宽度:100,
预览最大高度:100,
previewCrop:true
}).on('fileuploadadd',函数(e,数据){
data.context=$('').appendTo('#文件');
$.each(data.files,函数(索引,文件){
变量节点=$(“”)
//.append($('').text(file.name));
如果(!索引){
节点
.append(“”)
//.append(uploadButton.clone(true).data(data));
}
appendTo(data.context);
});
}).on('fileuploadprocessalways',函数(e,数据){
var指数=data.index,
file=data.files[index],
node=$(data.context.children()[index]);
if(file.preview){
节点
.prepend(“”)
.prepend(file.preview);
}
if(file.error){
节点
.append(“
”)
.append(file.error);
}
if(索引+1==data.files.length){
data.context.find('按钮')
//.text('Upload2')
.prop('disabled',!!data.files.error);
}
}).on('fileuploadprogressall',函数(e,数据){
var progress=parseInt(data.loaded/data.total*100,10);
$('#progress.bar').css(
“宽度”,
进度+“%”
);
}).on('fileuploaddone',函数(e,数据){
$.each(data.result.files,函数(索引,文件){
//变量链接=$('')
//.attr('target','u blank')
//.prop('href',file.url);
$(data.context.children()[index])
//.wrap(link);
});
}).on('fileuploadfail',函数(e,数据){
$.each(data.result.files,函数(索引,文件){
var error=$('').text(file.error);
$(data.context.children()[index])
.append(“
”)
.append(错误);
});
}).prop('disabled',!$.support.fileInput)
.parent().addClass($.support.fileInput?未定义:“已禁用”);
});
对于上传的每个图像,都会创建一个缩略图并显示在站点上。我的目标是能够将这些缩略图中的每一个都包装在我指定的html代码中(将是拖放li代码)。有什么建议吗?我似乎无法在这段代码中找到我应该在哪里预加或附加
代码。试试这个
.on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
// var link = $('<a>')
// .attr('target', '_blank')
// .prop('href', file.url);
$(data.context.children()[index])
// .wrap(link);
var li_wrap = $('<li>');
$(data.context.children()[index]).wrap(li_wrap);
});
.on('fileuploaddone',函数(e,数据){
$.each(data.result.files,函数(索引,文件){
//变量链接=$('')
//.attr('target','u blank')
//.prop('href',file.url);
$(data.context.children()[index])
//.wrap(link);
变量li_wrap=$(“”);
$(data.context.children()[index]).wrap(li_wrap);
});