jquery圖片上傳預覽插件
① jquery圖片上傳插件哪個最好
Web Uploader 項目，符合你的要求。 1、引入資源 使用Web Uploader文件上傳需要引入三種資源：JS, CSS, SWF。 2、Html 首先需要准備一個按鈕，和一個用來存放添加的文件信息列表的容器。
② 求JS或jquery的上傳圖片帶預覽的代碼
這里有很多jquery插件，正好有你找的
http://www.jb51.net/article/14805.htm
希望對你有幫助
③ 上傳照片，並且馬上能預覽到縮略圖，這用的是哪個js插件
無需插件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By：DragonDean</title>
<script type="text/javascript">
//下面用於圖片上傳預覽功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接設img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用濾鏡
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必須設置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//圖片異常的捕捉，防止用戶修改後綴來偽造圖片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上傳的圖片格式不正確，請重新選擇!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>
④ web項目中 jquery預覽圖片插件在IE瀏覽器上通過濾鏡顯示圖片在圖片上出現小圖標是怎麼回事
有圖片沒載入出來~用開發者工具（F12）檢測一下看看就知道了~
⑤ web前端上傳圖片的幾種方法
下面給你介紹3種web前端上傳圖片的方法：
1.表單上傳
最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。
ajax無刷新上傳
Ajax無刷新上傳的方式，本質上與表單上傳無異，只是把表單里的內容提出來採用ajax提交，並且由前端決定請求結果回傳後的展示結果。
3.各類插件上傳
當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，我們可以藉助現有插件完成。
如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等，大家可根據項目實際需求選擇適合的插件。
⑥ js/jquery如何實現一張圖片的上傳預覽功能。。。。
使用AJAX，把文件保存到臨時目錄，把返回的值（文件路徑），放到頁面上預先添加的<IMG> 標簽中，就可顯示預覽圖片，再點上傳才把文件從臨時目錄（刪除臨時目錄文件）復制到你指定的目錄中
⑦ 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 圖片上傳插件
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"。
⑨ 用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即可。