jquery上传视频插件
A. jquery图片上传插件哪个最好
Web Uploader 项目，符合你的要求。 1、引入资源 使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。 2、Html 首先需要准备一个按钮，和一个用来存放添加的文件信息列表的容器。
B. jquery 除了上传插件Uploadify以外有没有别的上传插件,这个插件是选择文件就直接上传了
Uploadify有个方法可以设置，下面这样设置，就不会直接上传了
uploadifySettings('auto', false)
你加个按钮，执行js：
$('#uploadify').uploadifyUpload();//开始上传
C. jquery 1.11 怎么用swfupload插件实现文件上传
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<metahttp-equiv='Content-Type'content='text/html;charset=utf-8'/>
<title>Fileupload</title>
<linkrel="Stylesheet"href="js/Plug-in/jquery.uploadify/uploadify.css"/>
<scripttype="text/javascript"src="js/Plug-in/jquery.uploadify/jquery-1.3.2.min.js"></script>
<scripttype="text/javascript"src="js/Plug-in/jquery.uploadify/swfobject.js"></script>
<scripttype="text/javascript"src="js/Plug-in/jquery.uploadify/jquery.uploadify.v2.1.0.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#uploadify").uploadify({
'uploader':'js/Plug-in/jquery.uploadify/uploadify.swf',
'script':'uploadify.php',
'cancelImg':'js/Plug-in/jquery.uploadify/cancel.png',
'folder':'uploadfile',
'queueID':'fileQueue',
'auto':false,
'multi':true,
});
});
</script>
</head>
<body>
MAX:20M
</BR>
<inputtype="file"name="uploadify"id="uploadify"/>
<ahref="javascript:$('#uploadify').uploadifyUpload()">Upload</a>|<ahref="javascript:$('#uploadify').uploadifyClearQueue()">cancel</a>
<divid="fileQueue"></div>
</body>
</html>
#uploadify.php
<?php
/*
Uploadifyv2.1.0
ReleaseDate:August24,2009
Copyright(c)2009RonnieGarcia,TravisNickels
Permissionisherebygranted,freeofcharge,toanypersonobtaininga
(the"Software"),todeal
,
touse,,modify,merge,publish,distribute,sublicense,and/orsell
copiesoftheSoftware,
furnishedtodoso,:
.
THESOFTWAREISPROVIDED"ASIS",WITHOUTWARRANTYOFANYKIND,EXPRESSOR
IMPLIED,,
.INNOEVENTSHALLTHE
,DAMAGESOROTHER
LIABILITY,WHETHERINANACTIONOFCONTRACT,TORTOROTHERWISE,ARISINGFROM,
THESOFTWARE.
*/
if(!empty($_FILES)){
$tempFile=$_FILES['Filedata']['tmp_name'];
$targetPath=$_SERVER['DOCUMENT_ROOT'].$_REQUEST['folder'].'/';
$targetFile=str_replace('//','/',$targetPath).$_FILES['Filedata']['name'];
$targetFile=iconv("utf-8","gbk",$targetFile);
//$fileTypes=str_replace('*.','',$_REQUEST['fileext']);
//$fileTypes=str_replace(';','|',$fileTypes);
//$typesArray=split('|',$fileTypes);
//$fileParts=pathinfo($_FILES['Filedata']['name']);
//if(in_array($fileParts['extension'],$typesArray)){
//'texist
//mkdir(str_replace('//','/',$targetPath),0755,true);
move_uploaded_file($tempFile,$targetFile);
echo"1";
//}else{
// echo'Invalidfiletype.';
//}
}
?>
D. 有哪些好用的 jQuery 图片上传插件
1、uploadify
它是针对jQuery的免费文件上传插件，可以轻松将单个或多个文件上传到网站上，可控制并发上传的文件数，通过接口参数和CSS控制外观。Web服务器需支持flash和后端开发语言。
2、FancyUpload
它是一个由CSS和XHTML编写样式的Ajax文件上传工具，安装简便，服务器独立，由MooTools模块驱动，可以在任何现代浏览器上使用。
3、Aurigma Upload Suite(Image Uploader)
这是一个不限大小，不限格式的文件/图片批量上传工具，是收费控件。它支持云端存储和客户端文件处理，支持断点续传，稳定可靠。从8.0.8开始，Image Uploader将名称改为"Aurigma Upload Suite"。
E. jQuery插件之ajaxFileUpload
ajaxFileUpload是一个异步上传文件的jQuery插件，语法：$.ajaxFileUpload([options])。
使用方法：
第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序。
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
第二步：HTML代码
第三步：JS代码第四步：后台页面upload.aspx代码。
F. yii2高级框架怎么使用jquery file upload上传插件
// 视图文件
use kartik\file\FileInput;
<?php $form = ActiveForm::begin([
'options' => ['enctype'=>'multipart/form-data'],
]); ?>
<?php
echo $form->field($model, 'banner_url[]')->label('banner图')->widget(FileInput::classname(), [
'options' => ['multiple' => true],
'pluginOptions' => [
// 需要预览的文件格式
'previewFileType' => 'image',
// 预览的文件
'initialPreview' => ['图片1', '图片2', '图片3'],
// 需要展示的图片设置，比如图片的宽度等
'initialPreviewConfig' => ['width' => '120px'],
// 是否展示预览图
'initialPreviewAsData' => true,
// 异步上传的接口地址设置
'uploadUrl' => Url::toRoute(['/goods/async-image']),
// 异步上传需要携带的其他参数，比如商品id等
'uploadExtraData' => [
'goods_id' => $id,
],
'uploadAsync' => true,
// 最少上传的文件个数限制
'minFileCount' => 1,
// 最多上传的文件个数限制
'maxFileCount' => 10,
// 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
'showRemove' => true,
// 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
'showUpload' => true,
//是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
'showBrowse' => true,
// 展示图片区域是否可点击选择多文件
'browseOnZoneClick' => true,
// 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
'fileActionSettings' => [
// 设置具体图片的查看属性为false,默认为true
'showZoom' => false,
// 设置具体图片的上传属性为true,默认为true
'showUpload' => true,
// 设置具体图片的移除属性为true,默认为true
'showRemove' => true,
],
],
// 一些事件行为
'pluginEvents' => [
// 上传成功后的回调方法，需要的可查看data后再做具体操作，一般不需要设置
"fileuploaded" => "function (event, data, id, index) {
console.log(data);
}",
],
]);
?>
<?php ActiveForm::end(); ?>
如上所述，基本上都是组件 FileInput的基本属性和设置，我们这里也仅仅罗列了一些常用的属性介绍，如有所需，可查看文档看属性的详细说明。
按照如上所配置，我们预览下效果图
感觉上效果很是可以，在开始写php代码实现之前，我们先在controller中实现 initialPreview和 initialPreviewConfig的配置
假设上面的视图文件是用户展示商品图片的详情页，当前controller是指渲染视图文件的controller，则需要在controller中获取商品关联的图片，用于展示或者说用于商品图片的删除\新增操作。
// 假设商品的图片是 $relationBanners,$id是商品的id
// $relationBanners的数据结构如：
/**
* Array
*(
* [0] => Array
* (
* [id] => 1484314
* [goods_id] => 1173376
* [banner_url] => ./uploads/20160617/146612713857635322241f2.png
* )
*
*)
*/
$relationBanners = Banner::find()->where(['goods_id' => $id])->asArray()->all();
// 对商品banner图进行处理
$p1 = $p2 = [];
if ($relationBanners) {
foreach ($relationBanners as $k => $v) {
$p1[$k] = $v['banner_url'];
$p2[$k] = [
'url' => Url::toRoute('/banner/delete'),
'key' => $v['id'],
];
}
}
$model = new Banner;
return $this->render('banner', [
'model' => $model,
'p1' => $p1,
'p2' => $p2,
'id' => $id
]);
你可以看到p1是图片地址的集合，这里用于赋值给initialPreview
p2是一组url和key的集合，这里用于赋值给initialPreviewConfig
其中url是移除图片的请求地址
key是每个图片对应的id
此时我们视图文件中的pluginOptions应该是这样的
'pluginOptions' => [
// other code
'initialPreview' => $p1,
'initialPreviewConfig' => $p2,
// other code
],
注意设置initialPreviewAsData为true哦，不然等会创建图片后，预览图不会显示。
我们在一开始配置文件中配置了uploadUrl，该参数是异步上传的图片地址。
现在看上传界面应该是光秃秃的，我们选择一张图片后效果如上图2所示，
需要提醒的是，每张小图片上的上传是上传对应的小图片，input框（右下角）的上传和移除都是针对所有的图片的操作，一张也是上传，十张也是上传，我们这里只对多图上传的操作做一个必要的说明。
图片上传的地址以及上传需要的额外参数（如商品id）我们都准备好了，额外的参数配置项是uploadExtraData，具体见上面视图文件中的配置。
接着我们看 /goods/async-image 异步上传的程序实现
public function actionAsyncImage ()
{
// 商品ID
$id = Yii::$app->request->post('goods_id');
$p1 = $p2 = [];
if (empty($_FILES['Banner']['name']) || empty($_FILES['Banner']['name']['banner_url']) || !$id) {
echo '{}';
return;
}
for ($i = 0; $i < count($_FILES['Banner']['name']['banner_url']); $i++) {
$url = '/banner/delete';
$imageUrl = ''; //调用图片接口上传后返回图片地址
// 图片入库操作，此处不可以批量直接入库，因为后面我们还要把key返回 便于图片的删除
$model = new Banner;
$model->goods_id = $id;
$model->banner_url = $imageUrl;
$key = 0;
if ($model->save(false)) {
$key = $model->id;
}
// $pathinfo = pathinfo($imageUrl);
// $caption = $pathinfo['basename'];
// $size = $_FILES['Banner']['size']['banner_url'][$i];
$p1[$i] = $imageUrl;
$p2[$i] = ['url' => $url, 'key' => $key];
}
echo json_encode([
'initialPreview' => $p1,
'initialPreviewConfig' => $p2,
'append' => true,
]);
return;
}
到此，单图和多图上传的工作我们也就完成了。
为了实现图片的删除效果，这里可以先上传两张图片。你可以单张上传也可以多张上传。
上传成功后你可以刷新当前页面，因为一开始我们就在controller中实现了图片的预览工作，所以理应会展示我们已经上传的两张图片。
按照我们的配置，现在的预览图应该是这样的。
不说废话，我们看图片删除的程序（/banner/delete）实现
public function actionDelete ()
{
if ($id = Yii::$app->request->post('key')) {
$model = $this->findModel($id);
$model->delete();
}
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return ['success' => true];
}
G. js jquery 视频播放插件
html提供了在线播放的元素标签，不需要加载任何插件或播放器，他都是通过元素标签自己调用的
详细可以去w3school的html中去找，如果支持html5，那就更方便了
H. DWZ中怎样整合JQuery的ajaxFileUpload上传插件
jQuery插件AjaxFileUpload可以实现ajax文件上传，需要jQuery库文件和ajaxfileupload.js
一.引入部分
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
二.<body>部分
<img src="images/nophoto.jpg" id="picture" width="160px" height="200px"/>
<input type="file" id="touxiang" name="photo" size="10" onchange="changImg()"/>
注意：使用AjaxFileUpload插件上传文件可不需要form
<form name="form" action="" method="POST" enctype="multipart/form-data">
……相关html代码……
</form>
三.js部分
function changImg(){
$.ajaxFileUpload
(
{
url:'XXX.action', //上传文件的服务端
secureuri:false, //是否启用安全提交
dataType: 'text', //数据类型
fileElementId:'touxiang', //表示文件域ID
//提交成功后处理函数 html为返回值，status为执行的状态
success: function(html,status)
{
},
//提交失败处理函数
error: function (html,status,e)
{
}
}
)
}
四.原理
利用jQuery的选择器获得file文件上传框中的文件路径值，然后动态的创建一个iframe，并在里面建立一个新的file 文件框，提供post方式提交到后台。最后，返回结果到前台。
五.总结
使用jQuery插件AjaxFileUpload实现无刷新上传文件非常实用，由于其简单易用，因些这个插件相比其它文件上传插件使用人数最多，非常值得推荐。
I. JQuery上传插件Uploadify里面有个参数queueID,这个参数是怎么算出来的
queueID是页面上容器的id，这个是前端参数，是用来指定进度条出现的位置，比如有个容器
<div
id="tt"></div>
uploadify指定queueID:"tt",那么文件上传时进度条会出现在这个容器内。