当前位置:首页 » 文件管理 » yiiajax上传图片

yiiajax上传图片

发布时间: 2022-12-11 01:13:28

㈠ 用jquery实现ajax 上传图片提交到php

好像不可以吧,浏览器为了安全不能用javascript读取本地文件的

㈡ ajax 上传图片怎么获取

我们以创建产品时,上传产品主图为例,先来演示一下效果,首先是在用户界面上出现一个input file元素,用户点击时,可以选择一个图片

点击打开之后,后台开始异步上传图片数据到服务器,同时加载动态图片显示

3
图片数据传输完毕,后台返回上传好的图片的路径,然后显示出刚刚上传好的图片,同时加载按钮消失

㈢ 使用PHP Yii2.0框架上传图片的时候出现下面错误

你是不是少了其他js文件,你可以找一下其他已经成功你
Yii2.0里ajax处理成功的例子对比一下

㈣ jquery ajax多图上传显示怎么写

首先我们在页面上放置个上传按钮,使用POST提交到ajax.php。#ul_pics 用来显示上传完毕后的图片。
<a class="btn" id="btn">上传图片</a> 最大500KB,支持jpg,gif,png格式。
<ul id="ul_pics" class="ul_pics clearfix"></ul>
接着,加载jQuery.js和plupload.full.min.js插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
当点击按钮“上传图片”后,弹出选择文件对话框,按 "ctrl" 选择多图片上传。然后调用 uploader.start() 方法,开始上传。上传中间过程我们可以用 UploadProgress 方法来显示文件进度,最后通过 FileUploaded 来显示对应的图片。通过浏览器控制台,会发现上传一张图片,会向后台ajax.php请求一次。
var uploader = new plupload.Uploader({ //创建实例的构造方法
runtimes: 'html5,flash,silverlight,html4',
//上传插件初始化选用那种方式的优先级顺序
browse_button: 'btn',
// 上传按钮
url: "ajax.php",
//远程上传地址
flash_swf_url: 'plupload/Moxie.swf',
//flash文件地址
silverlight_xap_url: 'plupload/Moxie.xap',
//silverlight文件地址
filters: {
max_file_size: '500kb',
//最大上传文件大小(格式100b, 10kb, 10mb, 1gb)
mime_types: [ //允许文件上传类型
{
title: "files",
extensions: "jpg,png,gif"
}]
},
multi_selection: true,
//true:ctrl多文件上传, false 单文件上传
init: {
FilesAdded: function(up, files) { //文件上传前
if ($("#ul_pics").children("li").length > 30) {
alert("您上传的图片太多了!");
uploader.destroy();
} else {
var li = '';
plupload.each(files,
function(file) { //遍历文件
li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上传中,显示进度条
$("#" + file.id).find('.bar').css({
"width": file.percent + "%"
}).find(".percent").text(file.percent + "%");
},
FileUploaded: function(up, file, info) { //文件上传成功的时候触发
var data = JSON.parse(info.response);
$("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p>" + data.name + "</p>");
},
Error: function(up, err) { //上传出错的时候触发
alert(err.message);
}
}
});
uploader.init();

㈤ 急!ajax上传图片,PHP获取不到

如何用ajax上传图片的话 我会用js把图片转成base64 然后在后端在转回来

㈥ php 不使用插件怎么用 ajax上传图片

可以使用tp的自带的上传类

publicfunction ajaxupload(){

//$saveTime=date('Y').'/'.date('m').'/'.date('d').'/';//设置附件上传目录
$fileName=$_GET['fileName'];
$upload = new \Org\Util\UploadFile();// 实例化上传类
$upload->maxSize = 314572 ;// 设置附件上传大小
$upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->savePath = './CustomerPaper/'.'cid'.$customerdir."/"; // 设置附件上传根目录
// 上传单个文件
$info = $upload->uploadOne($_FILES[$fileName]);
//mp($upload);die;

if(!$info) {// 上传错误提示错误信息
$data['flag']=0;
$data['msg']=$upload->getErrorMsg();

}else{// 上传成功获取上传文件信息
$data['flag']=1;
$data['msg']=__ROOT__."/".$info[0]['savepath'].$info[0]['savename'];

}
//$this->ajaxReturn($data,'JSON');
echo json_encode($data);

}

㈦ ajax上传图片,C#编写的webserbice接收,无法上传

不是这样上传的,你就传个图片路径服务器怎么能获取到客户端的文件?
如果需要ajax异步上传图片,有两种解决方案,
一、采用HTML5的FileReader的readAsDataURL获取图片的base64编码,获取出来是一个字符串,把这个字符串上传到服务器,服务器接收到采用Convert.FromBase64String获取图片byte数组,再转换成图片格式保存。
二、使用隐藏form表单和隐藏iframe,将form的target属性设置为iframe的name,在from表单里放一个file控件,用它选择图片,然后提交form表单,后台接收到图片保存,返回一段js代码,类似window.parent.uploadCallback({"state":1,"url":"你保存图片的路径"});,然后在页面写一个function uploadCallback(result){//处理回调}
不知道有没有更好的解决办法,我用过的就这两种,感觉都挺好用。

㈧ php 异步上传图片几种方法总结

代码如下
form action="upload.php" id="form1" name="form1" enctype="multipart/form-data" method="post" target="uploadIframe"> <!--上传图片页面 --> </form> <iframe name="uploadIframe" id="uploadIframe" style="display:none"></iframe>
然后后台处理完上传图片逻辑后返回给前台,利用ajax修改当前页面DOM对象实现无刷新上传图片的友好功能。
实例
代码如下
a.html <form enctype="multipart/form-data" action="a.php" target="ifram_sign" method="POST"> <input name="submit" id="submit" value="" type="hidden"> <label>上传文件: <input name="test_file" type="file" id="test_file" size="48"></label> <input type="image" value="立即上传" id="submit_btn"> </form><iframe name="ifram_sign" src="" frameborder="0" height="0" width="0" marginheight="0" marginwidth="0"></iframe>
php代码:
代码如下
<?php
if ($_files["test_file"]["error"] > 0)
{
echo "Error: " . $_files["test_file"]["error"] . "<br />";
}
else
{
//这里的判断图片属性的方法就不写了。自己扩展一下。
$filetype=strrchr($_files["test_file"]["name"],".");
$filetype=substr($filetype,1,strlen($filetype));
$filename="img/".time("YmdHis").".".$filetype;
move_uploaded_file($_files["test_file"]["tmp_name"],$filename);
echo '<script >alert(1)</script>';
$return="parent.document.getElementByIdx_x('mpic".$pageset_id."').innerhtml='".$dataimgpath."'";
echo "<script >alert('上传成功')</script>";
echo "<script>{$return}</script>";
}
?>
其实jquery ajax图片异步上传
html:
<!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" lang="en_US" xml:lang="en_US">
<head>
<title>图片异步上传</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">
<body>
<div class="frm">
<form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upfile">
</form>
<iframe src="" width="0" height="0" style="display:none;" name="tarframe"></iframe>
</div>
<div id="msg">
</div>
</body>
</html>

index.js
$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});

function stopSend(str){
var im="<img src='upload/images/"+str+"'>";
$("#msg").append(im);
}

upload.php
<?php
$file=$_files['upfile'];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file['tmp_name'],"upload/images/".$name);
//调用iframe父窗口的js 函数
echo "<script>parent.stopSend('$name')</script>";
?>

异步上传图片几种方法

㈨ yii2 怎么用ajax上传文件

塞下曲·林暗草惊风(卢纶)

㈩ jqueryajax不能上传图片

不能上传的原因可能是jquery插件使用不正确。

解决方法:

1、在head之间加入jquery引用

<scripttype="text/javascript" src="jquery.js"></script>

<scriptsrc="project/js/jquery.form.js" type="text/javascript"></script>

<scriptsrc="project/js/fileload.js" type="text/javascript"></script>

2、定义fileload.js,代码如下:

function createHtml(obj) {
var htmstr = [];
htmstr.push( "<form id='_fileForm' enctype='multipart/form-data'>");
htmstr.push( "<table cellspacing="0" cellpadding="3" style="margin:0 auto; margin-top:20px;">");
htmstr.push( "<tr>");
htmstr.push( "<td class="tdt tdl">请选择文件:</td>");
htmstr.push( "<td class="tdt tdl"><input id="loadcontrol" type="file" name="filepath" id="filepath" /></td>");
htmstr.push( "<td class="tdt tdl tdr"><input type="button" onclick="fileloadon()" value="上传"/></td>");
htmstr.push( "</tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" colspan='3'style='text-align:center;'><div id="msg">&nbsp;</div></td> </tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" style=" vertical-align:middle;">图片预览:</td> <td class="tdt tdl tdr" colspan="2"><div style="text-align:center;"><img src="project/Images/NoPhoto.jpg"/></div></td> </tr>");
htmstr.push( "</table>")
htmstr.push( "</form>");
obj.html(htmstr.join(""));
}

function fileloadon() {
$("#msg").html("");
$("img").attr({ "src": "project/Images/processing.gif" });
$("#_fileForm").submit(function () {
$("#_fileForm").ajaxSubmit({
type: "post",
url: "project/help.aspx",
success: function (data1) {
var remsg = data1.split("|");
var name = remsg[1].split("/");
if (remsg[0] == "1") {
var type = name[4].substring(name[4].indexOf("."), name[4].length);
$("#msg").html("文件名:" + name[name.length - 1] + " --- " + remsg[2]);
switch (type) {
case ".jpg":
case ".jpeg":
case ".gif":
case ".bmp":
case ".png":
$("img").attr({ "src": remsg[1] });
break;
default:
$("img").attr({ "src": "project/Images/msg_ok.png" });
break;
}
} else {
$("#msg").html("文件上传失败:" + remsg[2]);
$("img").attr({ "src": "project/Images/msg_error.png" });
}
},
error: function (msg) {
alert("文件上传失败");
}
});
return false;
});
$("#_fileForm").submit();
}

3、服务端处理上传。

protected void Page_Load(object sender, EventArgs e)
{
try
{
HttpPostedFile postFile = Request.Files[0];
//开始上传
string _savedFileResult = UpLoadFile(postFile);
Response.Write(_savedFileResult);

}
catch(Exception ex)
{
Response.Write("0|error|上传提交出错");
}

}
public string UpLoadFile(HttpPostedFile str)
{
return UpLoadFile(str, "/UpLoadFile/");
}
public string UpLoadFile(HttpPostedFile httpFile, string toFilePath)
{
try
{
//获取要保存的文件信息
string filerealname = httpFile.FileName;
//获得文件扩展名
string fileNameExt = System.IO.Path.GetExtension(filerealname);
if (CheckFileExt(fileNameExt))
{
//检查保存的路径 是否有/结尾
if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/";

//按日期归类保存
string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";
if (true)
{
toFilePath += datePath;
}

//物理完整路径
string toFileFullPath = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + toFilePath;

//检查是否有该路径 没有就创建
if (!System.IO.Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}

//得到服务器文件保存路径
string toFile = Server.MapPath("~" + toFilePath);
string f_file = getName(filerealname);
//将文件保存至服务器
httpFile.SaveAs(toFile + f_file);
return "1|" + toFilePath + f_file + "|" + "文件上传成功";
}
else
{
return "0|errorfile|" + "文件不合法";
}
}
catch (Exception e)
{
return "0|errorfile|" + "文件上传失败,错误原因:" + e.Message;
}
}

/// <summary>
/// 获取文件名
/// </summary>
/// <param name="fileNamePath"></param>
/// <returns></returns>
private string getName(string fileNamePath)
{
string[] name = fileNamePath.Split('\');
return name[name.Length - 1];
}
/// <summary>
/// 检查是否为合法的上传文件
/// </summary>
/// <param name="_fileExt"></param>
/// <returns></returns>
private bool CheckFileExt(string _fileExt)
{
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".rar",".png" };
for (int i = 0; i < allowExt.Length; i++)
{
if (allowExt[i] == _fileExt) { return true; }
}
return false;

}

public static string GetFileName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("HHmmss"));
serial.Append(rd.Next(100, 999).ToString());
return serial.ToString();
}

4、运行defualt.aspx页面以后显示的效果是:

热点内容
安卓备份微信聊天记录在哪里 发布:2025-08-01 06:11:26 浏览:137
宝马新四系哪个配置好看 发布:2025-08-01 06:02:25 浏览:949
存储过程源码 发布:2025-08-01 05:47:28 浏览:940
图加字源码 发布:2025-08-01 05:45:55 浏览:564
长春舰访问 发布:2025-08-01 05:45:17 浏览:488
安卓手机资料怎么导苹果电脑 发布:2025-08-01 05:43:45 浏览:735
为什么用银行卡要输密码 发布:2025-08-01 05:43:44 浏览:288
买车要买什么配置性价比最高 发布:2025-08-01 05:43:42 浏览:640
如何更改手机的账户密码 发布:2025-08-01 05:40:05 浏览:715
什么配置电脑扛得住魔兽争霸不卡 发布:2025-08-01 05:39:59 浏览:374