Ⅰ 想用jquery ui组件做一个文件上传的功能，但是其中涉及到的是跨域的问题，肿么办
不用jquery-ui,引入jquery后,再引入TableSort插件即可,使用非常简单.
Ⅱ 用js、jquery如何实现上传图片的预览
$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });
//获得表单元素
HttpPostedFile oFile = context.Request.Files[0];
//设置上传路径
string strUploadPath = "temp/";
//获取文件名称
string fileName = context.Request.Files[0].FileName;
补充：JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
Ⅲ 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];
}
Ⅳ jquery如何获取input(file)控件上传的图片名称，即"11111.jpg"
$('input').on('change',function(){
var value = $(this).val();
value = value.split("\\")[2];
})
value
就是图片名称。因为浏览器安全机制
获取到的value都是C:\fakepath\
加上图片名，所以可以用这个方式获取。
Ⅳ 求一款jQuery或js多图上传插件
多图上传没问题，但是想上传后可以删除，可以修改名称。这个只能你自己来实现。之前专门写了一个上传插件希望能帮到你
http://blog.csdn.net/sq111433/article/details/16872403
Ⅵ jquery file upload怎么使用
使用方法：
1. 需要加载的js文件：
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
2. html代码：
?
1
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
3. js代码：
?
12345678910
$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('<p/>').text(file.name).appendTo(document.body);});}});});
3.1 显示上传进度条：
?
123456789
$('#fileupload').fileupload({progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .bar').css('width',progress + '%');}});
3.2 需要一个<div>容器用来显示进：
?
123
<div id="progress"><div class="bar" style="width: 0%;"></div></div>
4. API
4.1 Initialization：
在上传按钮上调用fileupload()方法;
示例：
$('#fileupload').fileupload();
4.2 Options :
1: url：请求发送的目标url
Type: string
Example: '/path/to/upload/handler.json'
2.Type: 文件上传HTTP请求方式，可以选择“POST”，“PUT”或者"PATCH",
默认"POST"
Type: string
Example: 'PUT'
3. dataType:希望从服务器返回的数据类型，默认"json"
Type: string
Example: 'json'
4. autoUpload:默认情况下，只要用户点击了开始按钮被添加至组件的文件会立即上传。将autoUpload值设为true可以自动上传。
Type: boolean
Default: true
5. acceptFileTypes：允许上传的的文件类型
Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i
6. maxFileSize: 最大上传文件大小
Example: 999000 (999KB) //单位：B
7. minFileSize:最小上传文件大小
Example: 100000 (100KB) //单位：B
8.previewMaxWidth : 图片预览区域最大宽度
Example: 100 //单位：px
4.3 Callback Options:
使用方法一：函数属性
实例：
?
123456789101112
$('#fileupload').fileupload({drop: function (e, data) {$.each(data.files, function (index, file) {alert('Dropped file: ' + file.name);});},change: function (e, data) {$.each(data.files, function (index, file) {alert('Selected file: ' + file.name);});}});
使用方法二：绑定事件监听函数
实例：
?
123
$('#fileupload').bind('fileuploaddrop', function (e, data) {/* ... */}).bind('fileuploadchange', function (e, data) {/* ... */});
每个事件名称都添加前缀：”fileupload”;
注意推荐使用第二种方法。
常用的回调函数：
1. add: 当文件被添加到上传组件时被触发
?
1
$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});
或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});
2. processalways: 当一个单独的文件处理队列结束（完成或失败时）触发
3. progressall: 全局上传处理事件的回调函数
Example:
?
1234567
$('#fileupload').on('fileuploadprogressall', function (e, data) { //进度条显示var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar').css('width',progress + '%');});
4. fail : 上传请求失败时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数将不会被触发。
5. done : 上传请求成功时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数也会被触发。
6. always : 上传请求结束时（成功，错误或者中止）都会被触发。