當前位置:首頁 » 文件傳輸 » jquery圖片上傳插件
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

jquery圖片上傳插件

發布時間: 2022-01-24 15:08:07

❶ Jquery uploadify圖片上傳插件無法上傳的解決方法

首先你確定你使用的插件的版本,版本不同,產生的問題也不同,我用的是3.2.1的版本,我前幾天已經做好的功能今天運行的時候出錯了,搞了半天也不知道那錯了,最好仔細尋找,原來是jquery庫的引入問題,可能是我引入的包版本低了,我換了一個js庫立馬好了,真是坑爹啊,誰需要這個demo的可以郵件我!

❷ 多文件上傳,Jquery Upload插件,不知道怎麼刷新!

onQueueComplete//

你應該用上面這個函數;

你用的那個函數,是每個文件上傳結束以後都會執行的;而這個函數是隊列里所有文件都上傳完以後才執行。

❸ 有沒有大神知道,我的圖片上傳到資料庫後(用jquery插件),在資料庫只顯示圖片名

說出你的插件名,然後貼出你的上傳請求截圖,

如果資料庫裡面出錯,基本上是後台人員的代碼出錯了,

一般來說,資料庫是保存圖片的訪問路徑,

就比如網路知道的圖片

https://gss0.bdstatic.com/7051cy792sgCpNKfpU_Y_D3/static/common/widget/search-box-new/img/logo-_b2da087.png

這樣子的,

他只保存了圖片名,而沒有其他路徑,不出其他意外應該是後端代碼出錯了,而且一般來說,不會採用原有文件名,

所以最好貼出你的插件名,然後貼出你的上傳請求截圖,

❹ 誰有jquery的上傳插件ajaxupload.3.5.js文件,傳到[email protected],謝謝

<script type="text/javascript" src="<?php echo UPLOAD; ?>/js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="<?php echo UPLOAD; ?>/styles.css" />
<script type="text/javascript" >
$(function(){
var btnUpload=$('#upload1');
var status=$('#status1');
new AjaxUpload(btnUpload, {
action: '<?php echo UPLOAD; ?>/upload-image1.php',
name: 'image1',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('僅支持: JPG, PNG 或 GIF 格式');
return false;
}
status.text('上傳中...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files1').html('<img src="<?php echo UPLOAD; ?>/uploads/image/small_image/'+file+'" alt="" /><br /> <input type="text" name="image1" value="<?php echo UPLOAD; ?>/uploads/image/small_image/'+file+'" id="some_name">').addClass('success');
}else if(response==="size_error"){
$('<li></li>').appendTo('#files1').text('建議圖片尺寸 : 寬=80px,高=80px ').addClass('error');
} else{
$('<li></li>').appendTo('#files1').text(file).addClass('error');
}
}
});

var btnUpload=$('#upload2');
var status=$('#status2');
new AjaxUpload(btnUpload, {
action: '<?php echo UPLOAD; ?>/upload-image2.php',
name: 'image2',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('僅支持: JPG, PNG 或 GIF 格式');
return false;
}
status.text('上傳中...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files2').html('<img src="<?php echo UPLOAD; ?>/uploads/image/large_image/'+file+'" alt="" /><br /> <input type="text" name="image2" value="<?php echo UPLOAD; ?>/uploads/image/large_image/'+file+'" id="some_name">').addClass('success');
}else if(response==="size_error"){
$('<li></li>').appendTo('#files2').text('正確的圖片尺寸是 : 寬=640px,高=358px ').addClass('error');
} else{
$('<li></li>').appendTo('#files2').text(file).addClass('error');
}
}
});

var btnUpload=$('#upload3');
var status=$('#status3');
new AjaxUpload(btnUpload, {
action: '<?php echo UPLOAD; ?>/upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(zip)$/.test(ext))){
// extension is not allowed
status.html('<div class="error">僅支持zip格式</div>');
return false;
}
status.text('上傳中...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files3').html('<img src="<?php bloginfo('template_url'); ?>/images/icon_zipbox_128.png" alt="" /><br /> <input type="text" name="download_file" value="<?php echo UPLOAD; ?>/uploads/file/'+file+'" id="some_name">').addClass('success');
}else if(response==="size_error"){
$('<li></li>').appendTo('#files3').text('上傳文件不應大於 10MB. ').addClass('error');
} else{
$('<li></li>').appendTo('#files3').text(file).addClass('error');
}
}
});
});

$(function(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();

// call ajax
$("#sub_cat").empty();
$.ajax({
url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
type:'POST',
data:'action=my_special_action&main_catid=' + $mainCat,

success:function(results)
{
// alert(results);
$("#sub_cat").removeAttr("disabled");
$("#sub_cat").append(results);
}
});
}
);
});
</script>

❺ 如何實現不適用form實現圖片上傳,最好是用jquery的相關插件

這個不大清楚,不過拿jquery肯定是可以實現的
但是拿jquery有個缺點就是不大穩定
所以推薦用flash開源組件upload
而且還是免費的
很好用,無大小限制!

❻ 求PHP+jquery的uploadify插件實現完整的圖片上傳實例,要連接資料庫的,並且可以選擇相冊來上傳,如圖

juqeryajaxupload plus

❼ jQuery File Upload-jQuery上傳插件支持什麼格式

所有格式都支持。它不分格式,是個文件都可以傳,但是一般在傳遞的時候自己要寫格式過濾,用換過濾特定格式的文件

❽ 圖片上傳兼容性好的js插件 哪位大神可以幫忙呢

網路的http://fex..com/webuploader/
一般的上傳插件用的是flash插件,在手機端會有問題,手機的瀏覽器一般沒flash
webuploader是智能判斷,默認用hmtl5來上傳,不支持html5再使用flash,這樣老的瀏覽器和手機瀏覽器都能支持。

❾ 求一款jQuery或js多圖上傳插件

多圖上傳沒問題,但是想上傳後可以刪除,可以修改名稱。這個只能你自己來實現。之前專門寫了一個上傳插件希望能幫到你

http://blog.csdn.net/sq111433/article/details/16872403

❿ 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);
}
});
})