jquery上傳預覽插件
A. 用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即可。
B. 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代碼。
C. jQuery File Upload 圖片預覽代碼如何寫
jQuery File Upload是上傳文件的一個插件，不一定是圖片，所以裡面沒做預覽的支持。但是可以直接用jquery簡單實現出來，代碼如下：
/*
先在js里擴展一個uploadPreview方法
使用方法:
<div>
<imgid="ImgPr"width="120"height="120"/></div>
<inputtype="file"id="up"/>
把需要進行預覽的IMG標簽外套一個DIV然後給上傳控制項ID給予uploadPreview事件
$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120,ImgType:["gif","jpeg","jpg","bmp","png"],Callback:function(){}});
*/
jQuery.fn.extend({
uploadPreview:function(opts){
var_self=this,
_this=$(this);
opts=jQuery.extend({
Img:"ImgPr",
Width:100,
Height:100,
ImgType:["gif","jpeg","jpg","bmp","png"],
Callback:function(){}
},opts||{});
_self.getObjectURL=function(file){
varurl=null;
if(window.createObjectURL!=undefined){
url=window.createObjectURL(file)
}elseif(window.URL!=undefined){
url=window.URL.createObjectURL(file)
}elseif(window.webkitURL!=undefined){
url=window.webkitURL.createObjectURL(file)
}
returnurl
};
_this.change(function(){
if(this.value){
if(!RegExp(".("+opts.ImgType.join("|")+")$","i").test(this.value.toLowerCase())){
alert("選擇文件錯誤,圖片類型必須是"+opts.ImgType.join("，")+"中的一種");
this.value="";
returnfalse
}
if($.browser.msie){
try{
$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))
}catch(e){
varsrc="";
varobj=$("#"+opts.Img);
vardiv=obj.parent("div")[0];
_self.select();
if(top!=self){
window.parent.document.body.focus()
}else{
_self.blur()
}
src=document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width':opts.Width+'px',
'height':opts.Height+'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=src
}
}else{
$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
然後是HTML頁面進行調用：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<title>圖片上傳預覽演示</title>
<scriptsrc="jquery.min.js"type="text/javascript"></script>
<scriptsrc="16/uploadPreview.js"type="text/javascript"></script>
<script>
$(function(){
$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120});
});
</script>
</head>
<body>
<divstyle="width:500px;margin:0pxauto;"><h2>圖片上傳預覽演示</h2>
<div><imgid="ImgPr"width="120"height="120"/></div>
<inputtype="file"id="up"/>
</div>
</body>
</html>
D. 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];
}
E. 有哪些好用的 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"。
F. jquery圖片上傳插件哪個最好
Web Uploader 項目，符合你的要求。 1、引入資源 使用Web Uploader文件上傳需要引入三種資源：JS, CSS, SWF。 2、Html 首先需要准備一個按鈕，和一個用來存放添加的文件信息列表的容器。
G. 求JS或jquery的上傳圖片帶預覽的代碼
這里有很多jquery插件，正好有你找的
http://www.jb51.net/article/14805.htm
希望對你有幫助
H. 用jquery插件實現pdf文件的在線預覽，大概是怎麼個思路
其實也就是簡單的在瀏覽器中實現一個打開pdf文件，並有類似預覽功能的邊框。
其實在中國上經常見到類似的頁面，在瀏覽器中打開pdf文檔，可大部分都是由於版權的原因使用了一些很特殊的技術，自然很難模仿了。
即使有直接在瀏覽器打開的例子，也必須手動點擊一下鏈接然後才能打開pdf文件。如何直接打開，而不用點擊鏈接呢？
本以為自己對js很熟，也就使用js模擬點擊，可就是不管用，沒辦法，只能在中國上繼續尋找資料。最終想不到代碼卻很簡單。
最主要的是使用到了一個jquery的插件jquery.media.js，使用這個插件就很容易實現了。
核心代碼：
河套西部一次局地大暴雨成因分析 使用jquery.media.js就可以直接把一個連接到pdf文件的鏈接打
I. jquery 上傳文件插件uploadify jsp版本
寫一個servlet，看這里
http://www.javaeye.com/topic/376101
J. jquery-file-upload插件的問題。修改data。
jquery非同步上傳，一般來說這里上傳調用的是系統專門上傳的action，上傳好後返回上傳文件信息。你這里result.files就是返回的上傳結果。這個需要你在後台自己封裝。你前端需要什麼，後台就封裝什麼。
比如我以前寫過一個
Map<String,Object>fileObject=newHashMap<String,Object>();
fileinfo.put("size",size);//原始文件大小
fileObject.put("original",original);//原始文件唯一標識
fileObject.put("originalPath",originalPath);//原始文件臨時存儲目錄
fileObject.put("thumb",thumb);//圖片的預覽文件唯一標識
fileObject.put("thumbPath",thumbPath);//圖片預覽文件臨時存儲目錄
fileObject.put("name",fileFileName);//原始圖片名稱
fileObject.put("url",url);//原始圖片的web查看地址,這個可以設置img.src屬性
fileObject.put("thumbnailUrl",thumbnailUrl);//預覽圖片的web查看地址
fileObject.put("contentType",fileContentType);//上傳文件type
fileObject.put("deleteType","POST");//這是我自己封裝的post刪除
//這個是我自己封裝的刪除路徑
fileObject.put("deleteUrl",super.getRequest().getContextPath()+"/removeUpload.do?id="+original);
Map[]fileArray=newHashMap[1];
fileArray[0]=fileObject;
JSONObjectjsonObject=newJSONObject();
jsonObject.put("files",JSONArray.fromObject(fileArray));
HttpServletResponseresponse=getResponse();
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(jsonObject.toString());
response.getWriter().flush();
而前斷可以將上傳文件的唯一標識放到一個隱藏域里，表單提交的時候一起提發送到後台，再根據唯一標識去取上傳文件信息或寫或復制轉移。
前斷fileuploaddone我是這么用的
on('fileuploaddone',function(e,data){
//上傳結果
$.each(data.result.files,function(index,file){
if(file.url){
varlink=$('<a>').attr('target','_blank').prop('href',file.url);
//這個是文件上傳後的展示區域，可以在fileuploadadd事件里構建
var$imgdiv=$(data.context.children()[index]);
var$link=$imgdiv.find("canvas").wrap(link);
$imgdiv.append($('<inputtype="hidden"name="imagefileid"/>').prop('value',file.original));
$imgdiv.append($('<inputtype="hidden"name="imagefilename"/>').prop('value',file.name));
}elseif(file.error){
varerror=$('<spanclass="text-danger"/>').text(file.error);
$(data.context.children()[index]).append(error);
}
});
})