jquery请求图片,jquery怎么读取图片
用jquery怎么加载多张图片?
第一：可以看下jQuery的 lazyload.js
第二：可以用jquery来替换图片的src地址，每次点击就替换几个图片的src地址就行了
第三：用jQuery+ajax去获取图片，点击后发送ajax请求，返回下一次要显示的图片
img如何接收jquery ajax异步上传的动态图片
img标签的重点的是src属性,只要src属性中的url路径是正确的，在html中就可以正常显示出来图片。
我们通过jquery ajax获取到图片url后，设置img标签的src ='url' 就可以了。
代码示例：
$.ajax(url /*ajax 请求url*/,
{
data: data,/*请求参数*/
type:"get",
success:function(response){
var imgsrc = "";
//获取图片url的逻辑
imgsrc = response;
$("img") .arrt("src",imgsrc);
},
error:function(){
alert('ajax请求失败');
}
});
JQuery发送Ajax请求async设置成false不起作用（具体看图片）
你这个完全可以用异步执行啊，因为当success回调函数执行时就表示ajax调用已经完毕并且返回值了啊，不需要用同步的。success的意思不就是“成功”吗？也就是说当ajax成功了才会去执行后面的function的。
如果你感觉它没有停止执行，那么很可能是发生错误了。你可以设置 error : function(){...} 来检测错误。
jquery photoclip 怎么提交
jquery截取图片后，ajax异步提交该图片
如何用form异步提交已经截取的图片呢？因为后台(springMVC)用到组件上传图片，需要图片类型list。
解决思路：截取图片是base64，将base64存入form的input，type=file中，提交form即可。
[html] view plain copy
script type="text/javascript" src="assets/wap/kuaiqin/js/jquery-1.12.2.min.js" /script
script src="assets/wap/kuaiqin/js/iscroll-zoom.js"/script
script src="assets/wap/kuaiqin/js/hammer.js"/script
script src="assets/wap/kuaiqin/js/jquery.photoClip.js"/script
script type="text/javascript" src="assets/wap/kuaiqin/js/xx.js"/script
[html] view plain copy
img id="xiaotu" src="assets/wap/kuaiqin/img/share_feng.jpg" style="width:65px;height:65px;position:absolute;left:18px;top:-25px;"
[html] view plain copy
input type="file" id="face_upload" name="temp_img" style="display:none"
form method="post" encType="multipart/form-data"/form
[html] view plain copy
!-- 图片处理 --
div id="img_screen" style="position:absolute;top:0;width:100%;background:#000;overflow:hidden;display:none;"/div
div id="img_box" style="position:absolute;top:0;width:100%;display:none;margin-top:20%;"
div id="clipArea" style="margin:20px;height: 300px;"/div
/div
button id="clipBtn" style="position:absolute;top:0;right:0;border:0;color:#fff;background:#000;display:none;"确定/button
!-- end --
[html] view plain copy
$("#xiaotu").click(function(){//点击图片弹出文件夹
$("#face_upload").click();
});
[html] view plain copy
$("#face_upload,#smrz_upload").change(function(){//选择图片之后，将图片放到截取框中截取
var objUrl=getObjectURL(this.files[0]);
if(objUrl){
$(window).scrollTop(0);
$("#img_screen").show();
$("#img_box").show();
$("#clipBtn").show();
}
})
[html] view plain copy
function getObjectURL(file){//获取选择图片的base64
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
}
[html] view plain copy
var base64=null;
$("#img_screen").css("height",$(window).height());
$("#clipArea").photoClip({
width: 200,
height: 200,
file: "#face_upload",
ok: "#clipBtn",
clipFinish: function(dataURL) {
$('#xiaotu').attr("src", dataURL);
$('#datu').attr("src", dataURL);
base64=dataURL;
}
});
$("#clipBtn").click(function(){
convertToFile(base64);
});
[html] view plain copy
function convertToFile(base64Codes){//将base64转化blob，并放到form中
var form=document.forms[0];
var formData = new FormData(form);
var img_name=$("#face_upload").val();
formData.append("img",convertBase64UrlToBlob(base64Codes),img_name);//img是input的name属性，与后台的对应即可
$.ajax({//提交表单，异步上传图片
url : "api/public/uploadImg",
type : "POST",
data : formData,
dataType:"json",
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头
success:function(data){
imgurl=data.imgs[0];
subuserinfo_face(imgurl);
}
});
}
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}
jquery ajax问题
这东西我还真实现过，我做这个的时候对ajax与http的理解还很菜。告诉你改进办法，能不能实现看你，我写的ajax代码发来给你看看。
第一、要实现试题录入功能，这块你应该会。好用的试题录入功能，不好实现，我做的那个不太好用，每次都别人提供word做维护的帮录入的题目。这块自己考虑，直接录入的确很麻烦。看能否用word做个模板，用poi导入试题，这种方便用户也方便自己，当年做系统时间紧急，外加java还不会。我没考虑过这块内容，只实现了功能。
第二、试题保存到题库后，出题策略一般有两种
1、从试题库中随机抽取N道题，按单选、多选分类生成json。
2、单次录入试题，获取本次录入的所有试题按单选多选生成json。
第三、自动评卷，分两种实现策略。
1、快速，但不安全，把试题答案跟实体json一起放到web页面来，用js动态判卷，累积得分，用户提交试卷的时候，把得分显示给用户。这种方式答案可能会随试卷泄露。
2、从服务器上判卷，前端记录用户选择的答案，用实体id去关联，提交到服务器由服务器判定答案对错，并给出评分，最后反馈用户。
用户提交的答案一般来说要记录下来，我认为记录用户提交的答案（json转成string直接存储），最后得分，试卷id等。
所有数据存取操作全部用post方式，get处理的数据大小是1K，post看服务器设置，我用的domino最大4M足够一次出题用。
下面是我写的ajax实现代码，比较老旧的实现，改写成现代js框架ajax去实现兼容性会好：
全部代码贴不上来，我截取了主要的代码。
//生成试题
function ganarateTestQuestion (){
/*
*url:请求的url
*method:请求方法
*parames:请求参数
*returnType:回调函数返回的响应数据类型
*callback:回调函数名
*errorcallback:错误处理回调函数名
*/
var url="/"+dbpath+"/(AG_GetContestByUNID)?openagent";
var paras="unid="+document.all.fld_ContestDocumentUNID.value.trim();
url+=paras+"random="+Math.random();
var xmlHttp = new XMLHTTP(url,"get","","xml",contestXMLParser,errorHandle);
//解析试题文件
function contestXMLParser(xml){
var box = document.getElementById("contestContent");
box.innerHTML="";
//输出标题
printTitle(xml,box);
//输出类别
printCategory(xml,box);
document.getElementById("submitbtn").disabled="";
}
//错误处理
function errorHandle(error){
alert(error);
}
//打印标题
function printTitle(xml,e){
var contest = xml.getElementsByTagName("Contest")[0];
var title=contest.getElementsByTagName("Title")[0].text.trim();
var id=contest.getElementsByTagName("ID")[0].text.trim();
//设置窗口标题为标题
document.title=title;
var eTitle = document.createElement("div");
eTitle.setAttribute("id",id);
//标题样式
eTitle.className="title";
var text = document.createTextNode(title);
eTitle.appendChild(text);
e.appendChild(eTitle);
}
//打印类别
function printCategory(xml,e){
var cat = xml.getElementsByTagName("Category");
for (var i=0;icat.length;i++){
var iCat = cat[i];
var sort = parseInt(cat[i].getAttribute("sort"))+1;
var val = iCat.getAttribute("value");
var catName= iCat.getElementsByTagName("Name")[0].text.trim();
var eCat = document.createElement("div");
eCat.setAttribute("id","contest_Category_"+val);
eCat.className="";
var eCatName = document.createElement("p");
eCatName.className="title1";
var text =document.createTextNode(digitToChinese(sort)+"、"+catName);
eCatName.appendChild(text);
eCat.appendChild(eCatName);
//输出试题
printQuestion(iCat,eCat);
e.appendChild(eCat);
}
}
//打印试题
function printQuestion(cat,eCat){
var getSelAnswer= function(nodes) {
var sep = "\n";
var s = [];
for(var i=0;inodes.length;i++) {
//console.log(nodes[i])
if(nodes[i].text.trim() !== "") {
s.push(nodes[i].text.trim());
}
}
return s.join(sep);
};
var question = cat.getElementsByTagName("Question");
//alert(question.length)
for (var i=0;iquestion.length;i++){
var iQuestion = question[i];
var sort = iQuestion.getAttribute("sort").trim();
var type = iQuestion.getAttribute("type").trim();
var id= iQuestion.getAttribute("id").trim();
var title = iQuestion.getElementsByTagName("Title")[0].text.trim();
var selAnswer = getSelAnswer(iQuestion.getElementsByTagName("SelectAnswer"));
var answer = iQuestion.getElementsByTagName("Answer")[0].text.trim();
var score = iQuestion.getElementsByTagName("Score")[0].text.trim();
//添加正确答案
var eAnswer = document.all.fld_Answer;
eAnswer.value+=eAnswer.value.trim()==""?"'"+id+"':"+"['"+answer+"','"+score+"']":",'"+id+"':"+"['"+answer+"','"+score+"']";
//添加试题ID列表
var eId = document.all.fld_QuestionId;
eId.value+=eId.value.trim()==""?id:","+id;
//输出
var eQuestion = document.createElement("div");
eQuestion.setAttribute("id",id);
eQuestion.className="textIndent";
//创建试题标题
var eTitle = document.createElement("p");
var titleList = title.split("{question}");
titleList.push("");
var text = document.createTextNode(sort+"."+titleList[0]);
eTitle.appendChild(text);
var thisQuestion = document.createElement("input");
thisQuestion.type="text";
thisQuestion.className="question_input";
thisQuestion.vlue="";
thisQuestion.id="question_"+id;
thisQuestion.readOnly="true";
eTitle.appendChild(thisQuestion);
text = document.createTextNode(titleList[1]);
eTitle.appendChild(text);
eQuestion.appendChild(eTitle);
//创建可选项
selAnList= selAnswer.split("\n");
for (var j = 0; jselAnList.length; j++){
if (type=="Radio" || type=="CheckBox"){
var sel = document.createElement("input");
sel.setAttribute("type",type);
if (type=="Radio"){
sel.setAttribute("name","sel_Answer_"+id);
sel.setAttribute("id","sel_Answer_"+id);
}else{
sel.setAttribute("name","sel_Answer_"+id+"_"+j);
}
sel.setAttribute("value",letterList[j]);
sel.className="textIndent";
sel.attachEvent("onclick",selAnswerEvent(id,sel));
eQuestion.appendChild(sel);
sel.checked="";
var label = document.createTextNode(letterList[j]+"."+selAnList[j].trim());
eQuestion.appendChild(label);
var newline = document.createElement("br");
eQuestion.appendChild(newline);
/***test lixiaosuo***/
//sel.checked=true;
//thisQuestion.value=type=="Radio"?sel.value:thisQuestion.value+sel.value;
}
}
eCat.appendChild(eQuestion);
}
}
//点击
function selAnswerEvent(id,sel){
return function(){
var srcElement =sel;
eval("var testAnswer = {"+document.all.fld_TesterAnswer.value.trim()+"}");
document.all.fld_TesterAnswer.value="";
//点击单选按钮，记录答案
if (srcElement.type=="radio"){
testAnswer[id]=srcElement.value;
var sels = document.getElementsByName(sel.name);
for (var i=0;isels.length;i++){
if (sels[i].checked)sels[i].checked=false;
}
srcElement.checked=true;
//点击多选按钮 ，记录答案
}else if(srcElement.type=="checkbox"){
//增加答案
if (srcElement.checked){
if (testAnswer[id]==undefined){
testAnswer[id]=srcElement.value;
}else{
testAnswer[id]=testAnswer[id]+srcElement.value;
}
//删除答案
}else{
var ans = testAnswer[id].split("");
ans=ans.deleteValue(srcElement.value);
testAnswer[id]=ans.join("");
}
}
//记录答案进域中
for (d in testAnswer){
if (document.all.fld_TesterAnswer.value==""){
document.all.fld_TesterAnswer.value="'"+d+"'"+":'"+testAnswer[d]+"'";
}else{
document.all.fld_TesterAnswer.value+=","+"'"+d+"'"+":'"+testAnswer[d]+"'";
}
}
//更新表单中选择的试题答案
document.getElementById("question_"+id).value=testAnswer[id];
}
}
}
//校验是否完成所有题目的填写
function invalidTestComplete(){
var idList = document.all.fld_QuestionId.value.trim().split(",");
for (var i=0;iidList.length;i++){
if (idList[i].trim()!=""){
var question = document.getElementById("question_"+idList[i].trim());
if (question.value.trim()==""){
alert("试题未全部完成，请完成后再提交。");
question.focus();
return;
break;
}
}
}
var temp = confirm("试卷提交后将不能进行修改，确认提交？");
if (!temp)return;
staticResult(idList);
}
//统计分数
function staticResult(idList){
eval("var answer = {"+document.all.fld_Answer.value+"}");
eval("var testerAnswer = {"+document.all.fld_TesterAnswer.value+"}");
var result={};
var totalPoint=0;
for (var i=0;iidList.length;i++){
//取出正确答案
var iAnswer = answer[idList[i]][0];
//取出分数
var score = answer[idList[i]][1];
//取出答题人填写的答案
var iTesterAnswer = testerAnswer[idList[i]].trim();
//答案正确
if (iAnswer.split("").equal(iTesterAnswer.split(""))){
totalPoint+=parseInt(score);
//选择的答案，正确答案，本题分数，本题得分
result[idList[i]]=[iTesterAnswer,iAnswer,score,score]
//答案错误
}else{
//选择的答案，正确答案，本题分数，本题得分
result[idList[i]]=[iTesterAnswer,iAnswer,score,"0"]
}
}
//更新判题记录,得分
var checkResult=document.all.fld_CheckingResult;
checkResult.value="";
for (p in result){
checkResult.value+=checkResult.value.trim()==""?"'"+p+"':["+result[p].join(",")+"]":",'"+p+"':["+result[p].join(",")+"]"
}
var total=document.all.fld_TotalPoints;
total.value="";
total.value=totalPoint;
//保存文档
saveDoc();
}
//提交文档给代理保存
function saveDoc(){
/*
*url:请求的url
*method:请求方法
*parames:请求参数
*returnType:回调函数返回的响应数据类型
*callback:回调函数名
*errorcallback:错误处理回调函数名
*/
document.getElementById("submitbtn").disabled="true";
var url="/"+dbpath+"/(AG_SaveTestResult)?openagent"+"random="+Math.random();
var paras ="";
paras+="name="+document.all.fld_TesterName.value.trim();
paras+="altname="+escape(document.all.fld_TesterALTName.value.trim());
paras+="copltd="+escape(document.all.fld_TesterCopLtd.value.trim());
paras+="tdept="+escape(document.all.fld_TesterDept.value.trim());
paras+="deptno="+document.all.fld_TesterDeptNo.value.trim();
paras+="testdate="+escape(document.all.fld_TestDate.value.trim());
paras+="contestunid="+document.all.fld_ContestDocumentUNID.value.trim();
paras+="questionid="+document.all.fld_QuestionId.value.trim();
paras+="answer="+document.all.fld_Answer.value.trim();
paras+="testeranswer="+document.all.fld_TesterAnswer.value.trim();
paras+="result="+document.all.fld_CheckingResult.value.trim();
paras+="totalpoints="+document.all.fld_TotalPoints.value.trim();
var xmlHttp = new XMLHTTP(url,"post",paras,"text",function(text){alert(text);window.opener=null;window.open("","_self");window.close();},function(){alert("保存出错，请联系管理员。")});
}
请问大家谁用过 jquery file upload 多文件上传时是对后台多次请求吗（每上传一个图片请求一次）
图上上传，是以数组的形式式上传，不管传多少，都是请求一次，后面直接循环数组就好了，你file的name值要加个中括号：name="files[]",后台才能接收，$_FILES['files']