當前位置:首頁 » 文件傳輸 » jquery圖片上傳組件
擴展閱讀
360隨身wifi怎麼改密碼 2022-06-27 19:09:38

jquery圖片上傳組件

發布時間: 2022-06-23 15:39:58

Ⅰ 想用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 : 上傳請求結束時(成功,錯誤或者中止)都會被觸發。