『壹』 這是上傳圖片Jquery,我像上傳文檔格式該怎麼寫呢
代碼很簡單，常見的圖片格式均已加入驗證之中，小夥伴們可以直接拿去用的。
廢話少說，直接上代碼
復制代碼代碼如下:
<!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" />
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form01").change( function(){
var filepath=$("input[name='myFile']").val();
var extStart=filepath.lastIndexOf(".");
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
alert("圖片限於bmp,png,gif,jpeg,jpg格式");
return false;
}else{$("#name01").text(ext)}
var file_size = 0;
if ( $.browser.msie) {
var img=new Image();
img.src=filepath;
while(true){
if(img.fileSize > 0){
if(img.fileSize>3*1024*1024){
alert("圖片不大於100MB。");
}else{
var num03 = img.fileSize/1024;
num04 = num03.toFixed(2)
$(".size02").text(num04+"KB");
}
break;
}
}
} else {
file_size = this.files[0].size;
console.log(file_size/1024/1024 + " MB");
var size = file_size / 1024;
if(size > 10240){
alert("上傳的文件大小不能超過10M！");
}else{
var num01 = file_size/1024;
num02 = num01.toFixed(2)
$("#size01").text(num02 + " KB");
}
}
return true;
});
});
</script>
<title>無標題文檔</title>
</head>
<body>
<table width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="72" id="name01"> </td>
<td width="242"><input type="file" name="myFile" id="form01" /></td>
<td width="184" id="size01" class="size02"> </td>
</tr>
</table>
</body>
</html>
以上代碼超級簡單，小夥伴們使用的時候自己記得美化下，這里就不多做解釋了。
『貳』 js/jquery上傳圖片的問題
你可以使用jquery的一個插件uploadify，官網下載http://www.uploadify.com/
使用示例http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html
『叄』 jquery上傳文件是怎麼實現的
本篇文章是對Jquery中的LigerUI實現文件上傳的方法，進行了分析介紹，需要的朋友可以參考下
一、在Head中加入
<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>
二、Html中的Div代碼
復制代碼 代碼如下:
<div id="AppendBill_Div" style="display:none;"> <%-- 上傳 - 單 --%>
<table style="height:100%;width:100%">
<tr style="height:40px">
<td style="width:20%">
圖標:
</td>
<td><input type="file" style="width:200px" id="fileupload" name="fileupload"/>
</td>
</tr>
</table>
</div>
三、Js中-寫的是關鍵部分，會LigerUI的朋友-你懂得
1、grid中添加項【存地址欄位】
{ display: "掃描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }
2、Form可添加項【存地址和彈出選擇框】
{ name: "AppendBillPath1", type: "hidden" }, // --上傳-【5】--
{ display: "掃描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}} // --上傳-【6】--
$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1) // 【掃描件】 // --上傳-【7】--
3、事件
// #region ======================================= 【上傳掃描件窗口】 // --上傳-【8】--
復制代碼 代碼如下:
var AppendBillPathDetail = null;
function f_selectAppendBillPath_1() {
var imageurl = $("#AppendBill").val();
var AppendBill_Id = $("#AppendBill").val(); // 單號
if (imageurl.length == 0) {
LG.showError("您沒有輸入單號，請輸入隨單號！");
return;
}
if (AppendBillPathDetail) {
AppendBillPathDetail.show();
}
else {
AppendBillPathDetail = $.ligerDialog.open({
target: $("#AppendBill_Div"), title: '添加圖標',
width: 360, height: 170, top: 170, left: 280, // 彈出窗口大小
buttons: [
{ text: '上傳', onclick: function () { AppendBillPath_save(); } },
{ text: '取消', onclick: function () { AppendBillPathDetail.hide(); } }
]
});
}
}
function AppendBillPath_save()
{
var imgurl = $("#fileupload").val();
// var filehelpcode = $("#filehelpcode").val();
var extend = imgurl.substring(imgurl.lastIndexOf("."), imgurl.length);
extend = extend.toLowerCase();
if (extend == ".jpg" || extend == ".jpeg" || extend == ".png" || extend == ".gif" || extend == ".bmp")
{
}
else
{
LG.showError("請上傳jpg,jpep,png,gif,bmp格式的圖片文件");
return;
}
var imageurl = $("#AppendBill").val(); // extend
alert(imageurl);
$.ajaxFileUpload({
url: "../handle/ImageUpload.aspx?imageurl=" + imageurl, // --上傳-【9】-- aspx文件
secureuri: false,
fileElementId: "fileupload", //Input file id
dataType: "text",
success: function (data, status)
{
// ----------------- // 保存路徑
// $("#AppendBillPath2").val(Data);
LG.tip(data);
f_reload();
},
error: function (data, status, e) {
LG.showError(data);
}
});
}
// #endregion
四、後台cs，寫一句關鍵的，可以返回參數，前台提示
string url = Server.MapPath("/Image/" + gfilename + filenameext); // 執行上傳操作
『肆』 求js或JQ代碼，實現圖片上傳後在指定的div中以背景圖顯示
如果是background的話使用 $("div").css("background-image","圖片地址")，如果使用的img的話使用$("div").attr("src","地址");關鍵就是獲取圖片地址給弄上去
『伍』 如何用jq獲取file的上傳文件
我的理解是你應該先通過圖片上傳介面把圖片上傳到伺服器上（上傳後的伺服器端的圖片地址，保存到里），然後再統一提交所有的表單項。
『陸』 JS/JQ 如何插入圖片求兩種方法都寫下，菜鳥在這謝謝了~
可以描述下往哪裡插入圖片嗎？
如果是img標簽
<img id='img1'/>
<script>
//js
//頁面載入完後執行
window.onload=function(){
var img1=document.getelementbyId('img1');
img1.src="/img/img1.jpg';
}
//jquery
//jquery需要引入jquery.js文件
//頁面載入完後執行
$(function(){
$('#img1').attr("src","/img/img1.jpg");
});
</script>
這是js,jquery 給img標簽賦值的辦法。 不知道是不是你想要的， 你的問題可以描述清楚點。
『柒』 用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即可。
『捌』 怎樣用Jquery無刷新上傳圖片
lz應該是無跳轉上傳吧。
1.用ajax做提交，數據成功後返回個json格式的數據，jq判斷回調函數返回值、自動刷新下。2.用from插件可以實現提交 無跳轉
『玖』 怎樣用js或者jq實現點擊這個圖片就可以選擇上傳還有預覽圖片啊
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<h3>請選擇圖片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<br><br><img src="" id="img0" width="120">
</form>
</body>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl)
{
$("#img0").attr("src", objUrl);
$("#img0").removeClass("hide");
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file)
{
var url = null ;
if (window.createObjectURL!=undefined)
{ // basic
url = window.createObjectURL(file) ;
}
else if (window.URL!=undefined)
{
// mozilla(firefox)
url = window.URL.createObjectURL(file) ;
}
else if (window.webkitURL!=undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$('input').on('change',function(){
var value = $(this).val();
value = value.split("\\")[2];
alert(value);
})
</script>
</html>