AppCan做的图片上传代码
存在AppCan里的网页 index.html
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
</head>
<body class="um-vp" ontouchstart>
<div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
<div id="content" class="ub-f1 tx-l "> </div>
<!--content结束--> </div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
</body>
<script>
appcan.ready(function() {
appcan.frame.open("content", "http://benchmark.shinho.net.cn/XHR/index.html", 0, 0);
window.onorientationchange = window.onresize = function() {
appcan.frame.resize("content", 0, 0);
}
}); function Goto(popName){
appcan.openWinWithUrl(popName,'pages/upload.html');
} function Save(val){
appcan.request.ajax({
type : 'POST',
url : 'http://benchmark.shinho.net.cn/webapp/picturetest.aspx',
//添加参数
data : {
file:{path:val}
},
//期望的返回类型
dataType : 'html',
headers:{
MIME: 'multipart/form-data'
},
success : function(data) {
//获取内容
alert("上传成功！");
appcan.window.evaluatePopoverScript({
name:'',
popName:'content',
scriptContent:"SendUrl('"+data+"')"
});
},
error : function(xhr, type) {
alert('上传错误！');
}
})
}
</script>
</html>
云端页面的程序
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="欣和人" />
<meta name="description" content="欣和人">
<title>欣和人</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<link href="css/reset_v4.css" type="text/css" rel="stylesheet" media="all" />
<link rel="stylesheet" type="text/css" href="css/wap_v2.css" media="all">
<style type="text/css">
.imglist{width:58%;margin:0 auto;}
</style>
</head>
<body>
<ul class="mlist">
<a href="message.htm">我的消息</a> <a href="messub.htm">我的投稿</a>
</ul>
<div class="nav">
<div class="page-header"> <a href="index.html" target="_self" title=""><img src="data:images/topprev.png" /></a> <a href="index.html" target="_self" title=""><img src="data:images/logo.png" /></a> <a target="_self" title="" class="headerright list"><img src="data:images/toplist.png"/><span>2</span></a> <a href="search.htm" target="_self" title="" class="headerright"><img src="data:images/topsearch.png"/></a> <a href="submission.htm" target="_self" title="" class="headerright"><img src="data:images/topedit.png"/></a>
<div class="clear"></div>
</div>
<div class="nav_box">
<div class="nav_bor">查看其他期</div>
<div class="nav_d" id="wrapper1">
<ul class="nav_u">
</ul>
</div>
<div class="sab arr" ><img src="data:images/down.png" /></div>
<ul class="nav_u_down">
</ul>
</div>
</div>
<div class="wrapper submission">
<div class="title">
<input id="title" type="text" placeholder="请填入稿件标题">
<div class="clear"></div>
</div>
<div class="contain">
<textarea id="content" placeholder="请填写图文正文......"></textarea>
<div class="clear"></div>
</div>
<div class="imglist"> </div>
<button class="subbut" onClick="upload();">上传图片</button> <div class="clear"></div>
</div>
<button class="subfixbut" onclick="tg();">提交</button>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/controllers.js"></script>
<script type="text/javascript">
(function ($) {
$.getUrlParam = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
})(jQuery);
$(document).ready(function(){
$(".page-header .list").click(function(){
$(".mlist").slideToggle("slow");
});
$.ajax({
type: "GET",
url: "http://www.minierp.net.cn:8005/api/Journal/GetAllJournals",
success: function (data) {
var obj = eval('(' + data + ')');
//$(".nav_u").append("<li><a href='index.html?id=" + obj[0].journal_id + "'>" + obj[0].journal.substring(2, 9) + "期" + "</a></li>");
//for (i = 1; i < 6; i++) {
for (i = obj.length - 1; i >= obj.length - 6 || i >= 0; i--) {
$(".nav_u").append("<li><a href='index.html?id=" + obj[i].journal_id + "'>" + obj[i].journal.substring(2, 9) + "期" + "</a></li>");
}
for (i = 6; i <= obj.length; i++) {
$(".nav_u_down").append("<li><a href='index.html?id=" + obj[i].journal_id + "'>" + obj[i].journal.substring(2, 9) + "期" + "</a></li>");
}
}
});
}); $(function(){
function dropNav(){
var $btn=$(".arr"),
$Mn=$(".nav_u_down"),
$true=true;
$Mn.fadeOut();
$btn.bind("click",function (e){
if($true){
$Mn.fadeIn();
$(".nav_box").addClass("nav_box1");
$true=false;
}else{
$Mn.fadeOut();
$(".nav_box").removeClass("nav_box1");
$true=true;
}
e.preventDefault();
return false;
});
$Mn.bind("click" ,function (e){
$Mn.fadeIn();
$(".nav_box").addClass("nav_box1");
$true=false;
e.stopPropagation();
});
$(document).bind("click" ,function (){
$Mn.fadeOut();
$(".nav_box").removeClass("nav_box1");
$true=true;
});
};
$(function (){
dropNav();
});
})
function tg() {
var files = "";
var s = $(".imglist img");
for(i=0;i<s.length;i++){
files += $(s).attr("src")+";";
}
$.ajax({
type: "POST",
url: "http://www.minierp.net.cn:8005/api/Article/PostAritcle",
data: { pTitle: $("#title").val(), pContent: $("#content").val(), files: files },
success: function (result) {
if (result == 'OK') {
alert("投稿成功！");
window.location.href = "submission.htm";
} else {
alert("投稿失败！");
}
}
});
}
$(function () {
if ($.getUrlParam('id') != "") {
$.ajax({
type: "POST",
url: "http://www.minierp.net.cn:8005/api/Article/GetArticleEdit",
data: { articleid: $.getUrlParam('id') },
success: function (data) {
var obj = eval('(' + data + ')');
$("#title").val(obj[0].article_title);
$("#content").val(obj[0].article_content);
del($.getUrlParam('id'));
}
})
}
})
function del(id) {
$.ajax({
type: "DELETE",
url: "http://www.minierp.net.cn:8005/api/Article/DeleteArticle",
data: { articleid: id }
})
}
function upload(){
//uexWindow.evaluateScript("", 0, "Goto('pics');");
uexImageBrowser.cbPick = cbPick ;
uexImageBrowser.pick();
}
function SendUrl(url){
var h = $(".imglist").html();
h += "<img src='"+url+"' alt='' style='max-width:60px;max-height:60px;margin-right:15px;'/>";
$(".imglist").html(h);
} function cbPick(opId,dataType,p) {
uexWindow.evaluateScript("", 0, "Save('"+p+"');");
}
</script>
AppCan做的图片上传代码的更多相关文章
- 【西祠日志】【07】努力努力，找资料，思考，怎么做asp图片上传
[西祠日志][07]努力努力,找资料.思考.怎么做asp图片上传 (2015.07.23周四) 今天忘了带本子.直接写在书上了笔记,晚点还是夹在本子里. 学了这么久的web应用,一直都没时间去做一点 ...
- VUE2.0+VUE-Router做一个图片上传预览的组件
之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的 ...
- 一个伪ajax图片上传代码的例子
一个伪ajax图片上传实现代码. 复制代码代码如下: <?php if($_FILES){ ?> <script> window.parent.ajaxUploadPi ...
- 发现一个微博图床API和图片上传代码
网上寻到一款微博图床的插件,然后顺藤摸瓜找到了原作者的API代码. API文件: <?php /** * 上传图片到微博图床 * @author Youngxj & mengkun &a ...
- 简单的做一个图片上传预览（web前端）
转载:点击查看原文 在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理. 效果预览: & ...
- 图片上传代码（C#）
//上传 protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.Ha ...
- asp.net图片上传代码
前端: <form action="/ImageUpload.ashx" method="post" enctype="multipart/fo ...
- php图片上传代码
使用copy函数 if (!empty($_FILES)) { //图片 if(isset($_FILES['image'])) { $img_data = $_FILES['image']['tmp ...
- .net mvc + layui做图片上传（一）
图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...
随机推荐
- 在双系统( Win7 + Ubuntu )环境下正常删除Ubuntu
前言 首先切记一点:如果你和我一样使用ubuntu的目的是学习操作系统和Unix网络编程等,那么学习环境搭建好了以后切不要随意更新软件.否则系统崩溃,你又得重新配置各种环境,有多麻烦你懂的. 万一你像 ...
- 简单的将内容加入到drupal的主页面
首先要管理员用户 然后进入结构目录 进入菜单项 在main行 选择 列出list 选择添加链接 完善信息 保存即可 eg: http://peach.fafu.edu.cn/ 将papaya的jbro ...
- Tomcat发布网站知识集锦
修改端口.修改默认发布目录.多域名绑定 一.修改发布端口号为80(Tomcat默认为8080) 打开配置文件(我的如下:E:\J2EEServer\Tomcat 6.0\conf\server.xml ...
- Matlab神经网络工具箱学习之二
螃蟹的分类 这个例子的目的是根据螃蟹的品种.背壳的长宽等等属性来判断螃蟹的性别,雄性还是雌性. 训练数据一共有六个属性: species, frontallip, rearwidth, length, ...
- 某种数列问题 (jx.cpp/c/pas) 1000MS 256MB
众所周知,chenzeyu97有无数的妹子(阿掉!>_<),而且他还有很多恶趣味的问题,继上次纠结于一排妹子的排法以后,今天他有非(chi)常(bao)认(cheng)真(zhe)去研究一 ...
- java.lang.SecurityException: class "javax.servlet.FilterRegistration"（spark下maven）
今天写spark例子用到maven,但是自己maven又不熟悉.遇到错误找了半天知道是(sevlet-api2.5 3.0)包冲突需要解决包之间依赖问题却不知道怎么下手.但是最终慢慢了解还是找到新手的 ...
- 【P1835】小红花
很简单的题,然而我没想到,在NOIP上怎么办嘛QAQ 话说这题不知道怎么分类啊……先扔到玄学里边把…… 原题: Fj在圣诞节来临之际,决定给他的奶牛发一些小红花.现在Fj一共有N头奶牛,这N头牛按照编 ...
- 使用grep恢复被删除文件内容【转】
http://www.cnblogs.com/ggjucheng/archive/2012/10/07/2714311.html Unix/Linux下,最危险的命令恐怕就属rm命令了,每次在root ...
- C++仿函数和typename的用法
1.仿函数的定义是很简单的,就是一个重载了括号()运算符的类,也被称为函数对象. 主要是用于个性化扩展算法对象.stl中实现了好多算法,每个算法都可以完成日常的大部分工作,设计者还允许你在这些强大的算 ...
- Google perf tools for nginx
注意:本教程仅适用于Linux. 下面为大家介绍google-perftools的安装,并配置Nginx和MySQL支持google-perftools. 首先,介绍如何优化Nginx: 1,首先下载 ...